Forums

I have several forms that I am migrating from V3. I am cut and pasting the custom HTML which contains the fields. After a few missteps, I have successfully got everything working properly (it really wasn't as hard as I thought it was going to be - even without a migration tool), with one exception - how do I mark a field as required since I'm not using the wizard to build the forms?

Hi critter42,

Where CFv3 used class='required' in the input CFv4 uses class="validate['required']". For example

<input type="text" value="cgbg" name="input_text_1" title="" class="validate['required']" size="30" maxlength="150"> 

Other built-in options in CFv4 are:

validate['alpha']
validate['alphanum']
validate['digit']
validate['nodigit']
validate['number']
validate['email']
validate['phone']
validate['phone_inter']
validate['url']

You can apply more than one validation in a comma separated list e.g. validate['required', 'email']

Bob

That's what I needed - thanks!

I've added the class to the custom item, but I'm getting an error in formcheck-yui.js - Uncaught TypeError: Object [object Object] has no method 'getProperty'

Is there a tutorial on adding validation? Could be quite useful as there's not much out there at the moment.

Hi petersen,

The class has to be added to the input tag, not to the custom item itself. What is the code in your custom item.

Bob

<fieldset>
<div class="formrow">
<label for="contactname">Name:</label>
<input type="text" name="contactname" id="contactname" />
</div>
<div class="formrow">
<label for="telephone">Telephone:</label>
<input type="text" name="telephone" id="telephone" />
</div>
<div class="formrow">
<label for="email">Email:</label>
<input type="text" name="email" id="email"/>
</div>
<div class="formrow">
<label for="message">Message:</label>
<textarea name="message" id="message"></textarea>
</div>
<div class="formrow">
<input type="submit" name="submit" id="submit" value="Send" />
</div>
</fieldset>

I've added the class to the email field, and it loads the formcheck code, but doesn't validate. I'm loading jquery as well if that makes a difference?

Hi petersen,

I'm not quite sure what you are doing but I'd expect to see the validation class here

<input type="text" name="email" id="email" class="validate['required', 'email']" />

jQuery will be fine as long as it is in noConflict mode.

Bob

I'll pop it online and email you a link Bob.

Hi peterson,

I've partially solved this; I got the syntax wrong for the validation classes, looks like it needs to be

<input type="text" name="email" id="email" class="validate['required','email']" />

with no space after the , !!!

Then the validation works if you click the view in front-end link - except that there are some css problems with the error messages that need to e fixed.

On the article page the validation fails because there are some other JavaScript errors showing up

Application Cache Error event: Manifest fetch failed (404) http://domain.com/default.appcache?v=1
index.php:39Viewport argument value "160dpi" for key "target-densitydpi" was truncated to its numeric prefix.

Bob

Thanks Bob,

Sorted now. It was the space causing issues. I've also overridden the styles on the tables.

Pete

OK, have a couple of more questions.

1) What is the difference between adding the class declaration above and the "Auto Server Side Validation" (ASSV so I don't have to type all that out again🙂 ) action? I didn't even see the ASSV action when I asked the question initially, but I'm using that instead of the class declaration.

2) I think I've got the ASSV figured out, but I'm having an issue - I have required age field (id="age" of course🙂 ) and have inserted the div id="error-message-age" around the input tag since the field is from my custom code and not created by the wizard. I have ASSV configured so that the age field is listed in both the 'required' and 'number' fields. For the On Fail part of the action I have Show html and Load reCaptcha. If I leave the age field blank and just enter the reCaptcha, I get an error at the top of the form that says "1. This field should contain a number". There is no indication of WHAT field should contain a number and it doesn't mention this field is required. Is there something I'm missing in the configuration? Or is there some more code I need to add to my custom code?

Hi critter42,

The server-side validation is done on the server after the form is submitted; the browser-side validation using the class expression is done in the browser before the form is submitted.

Although very similar in what they do the usefulnees is quite different.

Browser-side validation is mainly to help the user complete the form correctly; it should be focused on their experience* as well as getting you the results that you want. Remember that browser-side validation can by by-passed by bots and users with JavaScript disabled.

Server-side validation is about getting clean data into your application. You *should* filter all results here to remove any possibility of faulty or malicious data as well as performing any cross-checks before continuing with the submission. This is the gateway point to your site.

And, no I don't always do 100% server-side validation and nor do most other people :-(

Bob

* I've lost track of the number of forms that validate names as 'alpha-only' so that O'Conner, and Smith-Bowen can't be entered; or forms that validate international post codes as numbers so that H0H 0H0 won't validate.

regarding my item 2) - is there something I'm doing wrong? How do I indicate to the user WHICH field the validation message belongs to? As it stands right now, all it does is put the error at the top of the page. Since I am going to eventually have several fields with the same validation type, I can't change the response message to reference a particular field. Is there any kind of variable I can put in the Error Messages tab of the ASSV settings that will change based on the field. For example, instead of "This field is required." which is what's there now, can I put in some variable in the message and it would substitute whichever field was generating the validation error?

I've tried different things, but I am not able to indicate to the user which field isn't validating - I'm just generating generic errors at the top of the page, which really doesn't help - any more thoughts on this?

Hi critter42,

I just dug around in the code and it looks as though a div that looks like this should work

<div id='error-message-input_name' . . . > . . . <\/div>

where you need to replace input_name with the name of the input the message is linked to.

Bob

I added that initially:

<tr>
	        <td><div id="error-message-age"><label for="age">Age:<br/>
            (Enter the age you will be on MARCH 23rd, 2012) *This information is required for liability purposes and because some events associated with MidSouthCon require age verification.</label></td>
	        <td><input id="age" maxlength="3" class="inputbox" name="age" size="30" type="text" /></div></td>
      </tr>

age is entered in "Required" and "Number" on the ASSV options dialog.

The first image I've attached shows the field empty, the second shows what I see after I submit the form.

I did find a setting on the General options (when you click on the form name from the Form Manager page) for "Show Top Errors" - when I set that to "Yes", I get the results in the second image. When I set it to "No", there is no error message whatsoever.

Hi,

So what's the issue exactly ? you need to show the error under the field ? if yes then please add a code like below under your field(s):

<div id="error-message-FIELD_NAME_HERE"></div>

Pay attention to replace the field name!

Regards,
Max

Look at the code snippet I posted - I did replace the field name and it is not showing up. I tried with the div wrapped around the field as in my snippet above and then just the div by itself next to the input tag. Either way, it only shows up when I set "error on top" to yes. If I set it to "no", then nothing shows up.

Hi critter42,

I took a copy of the page source of your form and got this working. I think that the problem is a little syntax error in the input. The form code is

<input id="age" maxlength="3" class="inputbox" class=" validate['required','number'] "name="age" size="30" type="text" />

There are two problems with this:[list]

The class attribute is repeated - the browser only pays attention to the first one so the JavaScript validation isn't triggered.

There is no space before name= which prevents ChronoForms from correctly parsing the value of the name and setting the ASSV message

[/list]
The 'fixed' version is

<input id="age" maxlength="3" class="inputbox validate['required','number']" name="age" size="30" type="text" />

Bob

:oops:

Wow...I can't believe I messed the tag up that bad...Beer money on its way - I really appreciate this.