Javascript Form Validation for Portals - DONE!!!

[MeltDown]

I use a couple of different javascripts to validate form fields before submission to the databases (pirated, re-written, but not sophisticated). The scripts are primarily based on the individual form names, using 'IF statements' to validate the right stuff is going in the right places.

I recently started using portal fields on -add and -edit forms. I am having difficulty getting the Javascripts to read the portal field names, I think this is due to the way javascript interprets the '::' (as in Relationship::Field_Name).

I would prefer client-browser edits to happen before the data actually gets sent to the database. For example, if field 'A' says 'Dogs', then field 'B' must include the rabies license and be validated as numeric entries, but otherwise field 'B' should be left blank - I don't want the person completing the form to be running back and forth between their browser and the server just to get the form filled out correctly. Besides, the 'onBlur' javascripts being used to copy stuff from one field to another don't work very well when you get the FileMaker error returned with your form.

Does anyone have experience with this? Thanks so much for your help!

[ June 15, 2001: Message edited by: MeltDown ]

[ June 18, 2001: Message edited by: MeltDown ]

[MeltDown]

OK, so I combined two different validation scripts, and solved the initial problem - I now have a javascript that validates the portal fields. (The script substrings the field name for the portal fields, and gets around the :: problem.) Except the script isn't working for radio buttons. If anyone has some radio-button validation I could use for portal fields, I would sure appreciate seeing it.

By the way, in my script "If (!(document form.fieldname[0] || document form.fieldname[1]))" validates regular radio button fields, but it doesn't work for portal::fields. I've tried substituting a javascript variable for the field name, but that doesn't work either.

Thanks!

OK - I finally found the solution. If anyone is interested, its something like...

var radio1 = ""

function blahblahblah...

if (document.images){

for (i=0; i<which.length;i++){

var tempobj.which.elements;

if (tempobj.name.substring(0,18)="Portal::RadioField" &&

radio1=="" && tempobj.value!="No"){

error message blahblahblah...}

}}

The input field in the body:

<input type=radio name=RadioField value="Yes" onClick="radio1='Yes'">

<input type=radio name=RadioField value="No" onClick="radio1='No'">

And don't forget to reset radio1 to "" if the form has a 'Clear' button.

[ June 18, 2001: Message edited by: MeltDown ]

[cinolas]

Hi,

I am just starting with Javascript, if i knew what I was doing I'd most likely find the answer to my question in your post

I would appreciate that you point the obvious for me:

I also need to validate a fields (standard text fields) within a portal as part of a -edit form submit, I already have a bit of form validation JS setup on my page but as of now it only validates fields outside of the portal. The fields need to be validated depending on the content of another field on the same portal row. Here is what my code looks like (cleaned for simplicity)

[FMP-Portal:ReportLineItems]

....<script>CurrRowNum = "[FMP-CurrentPortalRowNumber]";</script>

....[FMP-If:ReportLineItems::Shift.eq.am]

........[FMP-Field:ReportLineItems::NumberField1Name]:

........<script>document.write('<input type=text name="ReportLineItems::NumberField1.' + CurrRowNum + '" value="[FMP-Field:ReportLineItems::NumberField1]" size=5>');</script>

....[/FMP-If]

[/FMP-Portal]

As you can see I am already using JS to pass the portalrownumber inside the If statement, I didn't clean it out for simplicity because I though it might actually affect the way I'd be validating these fields.

So basically depending on the content of NumberField1Name.portalrow I would apply different vadition conditions to NumberField1.portalrow like:

If NumberField1Name.portalrow = "Some text string" then

....If NumberField1.portalrow is not empty then

........If NumberField1.portalrow = 0 then

............Validation=false

........end if

....else

........Validation=true

....end if

else if NumberField1Name.portalrow = "Some other text string" then <<<different string

....If NumberField1.portalrow is not empty then

........If NumberField1.portalrow > 10 then <<< different criteria

............Validation=false

........end if

....else

........Validation=true

....end if

end if

Get the idea ? All of this for every portal row.

Also, since the validation criteria change depending on the content of the NumberField1Name, couldn't this test be done in Filemaker ? I mean I could make a calculation field that returns the appropriate JS validation criterias as text depending on the content of NumberField1Name, and use the resulting text as part of validation code on thepage...

say... this would almost allow for a user definable validation system using an interface in FileMaker, resulting in JS code on the page... getting a bit ahead of myself here..

Anyway I'd really appreciate your thoughts (or anyone else's) on this and example code would be great too.

Thanks to all

[Garry Claridge]

What about an "onChange=" with some Javascript. For example:

<input type="text" name="ReportLineItems::NumberField1.[FMP-CurrentPortalRowNumber]" value="[FMP-Field:ReportLineItems::NumberField1]" onChange="if (document.myform.elements['ReportLines::NumberField1.[FMP-CurrentPortalRowNumber]'] != theother field) { alert ('They do not match!!!'); };">

Good Luck.

Garry

[cinolas]

Garry,

Won't there be a problem with the "::" as described above ?

Cheers and thanks

[Garry Claridge]

Not if you use:

document.myform.elements['....']

All the best.

Garry

[cinolas]

Hmmm.... It seems to want to work but I think I may have a syntax problem... here is what the JS looks like:

<script>document.write('<input type=text name="ReportLineItems::CustomNumberField2.' + CurrRowNum + '" value="[FMP-Field:ReportLineItems::CustomNumberField2]" size=5 onChange="if ("[fmp-field:ReportLineItems::CustomNumberField1OverCustomNumberField2Status]" == "On" && (isEmpty(document.theForm.ReportLineItems::CustomNumberField2.value) || document.theForm.ReportLineItems::CustomNumberField1.value >= document.theForm.ReportLineItems::CustomNumberField2.value)) { alert ('The number of successful attempts must be equal or smaller to the number of attempts'); };">');</script>

The field simply does not show up on the resulting HTML page. Could it be a problem with the ";" ? or with quotes ?

Thanks to all for the help.

Thanks again Garry!

[Garry Claridge]

Try this:

<input type="text" name="ReportLineItems::CustomNumberField2.[FMP-CurrentPortalRowNumber]" value="[FMP-Field:ReportLineItems::CustomNumberField2]" size=5 onChange="if('[fmp-field:ReportLineItems::CustomNumberField1OverCustomNumberField2Status]' == 'On' && (isEmpty(document.theForm.elements['ReportLineItems::CustomNumberField2.[FMP-CurrentPortalRowNumber]'].value) || document.theForm.elements['ReportLineItems::CustomNumberField1.[FMP-CurrentPortalRowNumber]'].value >= document.theForm.elements['ReportLineItems::CustomNumberField2.[FMP-CurrentPortalRowNumber]'].value)) { alert ('The number of successful attempts must be equal or smaller to the number of attempts');};">

It uses the document.MyForm.elements['portal::field'].value notation.

All the best.

Garry

[cinolas]

Hmm... still no go... Garry: I took your code, replaced the CurrentPortalRowNumber for the JS replacement (considering the If statement within the Portal) and appended the "<script>document.write('" and closing tags to form the following code:

<script>document.write('<input type="text" name="ReportLineItems::CustomNumberField2.' + CurrRowNum + '" value="[FMP-Field:ReportLineItems::CustomNumberField2]" size=5 onChange="if('[fmp-field:ReportLineItems::CustomNumberField1OverCustomNumberField2Status]' == 'On' && (isEmpty(document.theForm.elements['ReportLineItems::CustomNumberField2.' + CurrRowNum + ''].value) || document.theForm.elements['ReportLineItems::CustomNumberField1.' + CurrRowNum + ''].value >= document.theForm.elements['ReportLineItems::CustomNumberField2.' + CurrRowNum + ''].value)) { alert ('The number of successful attempts must be equal or smaller to the number of attempts');};">');</script>

The field still doesn't show...

Could it be because the portal row number for CustomNumberField1OverCustomNumberField2Status is not specified ? Quotes problem ?

Thanks again

[Garry Claridge]

Try the one I wrote! Don't modify it. You have a few quotes problems by inserting it all within a Script.

Good Luck.

Garry

p.s. I would have created a Javascript Function in the page head and called that from the "onChange=". It would make the whole thing easier to read and edit.