Client-Side Validation

A place for users and developers of the Xataface to discuss and receive support.

Client-Side Validation

Postby ADobkin » Sat Oct 23, 2010 3:13 pm

Re: Form Validation:

http://xataface.com/documentation/tutor ... validation

This document indicates both client-side (javascript) and server-side validation are available. However, I can't seem to figure out how to initiate client-side. For example, how would I enforce a maxlength on a field at the time of entry rather than waiting until the form is submitted?

Here is how it would be done according to the QuickForm docs:

By default, the validation rules check submitted data once it has been sent to the server. You can also enable client-side validation for some rules. To have a rule checked by the browser, before the data is submitted, add client as a fifth argument to addRule(). For example, to make sure a value is entered in the subject field that is at least five characters long, you’d use this:

// subject is required and must be at least 5 characters
$form->addRule('subject','Enter a valid subject','required',null,'client'); $form->addRule('subject','Enter a valid subject','minlength',5,'client');

The client-side validation is accomplished by JavaScript functions added to the form by HTML_QuickForm. When a user clicks the form’s submit button, the JavaScript functions run the client-side validation rules and pop up an alert box if any of the rules are not satisfied. Client-side validation is available for all of the built-in rules except for uploadedfile, maxfilesize, mimetype, and filename. It is also available for any custom regex rules. You can enable client-side validation on custom function rules if you also define a JavaScript function in the page with the same name as the custom function. That JavaScript function must duplicate the checks that the server-side PHP validation function does.
ADobkin
 
Posts: 195
Joined: Mon Oct 22, 2007 7:31 pm
Location: Atlanta, GA, USA

Re: Client-Side Validation

Postby shannah » Sat Oct 23, 2010 3:44 pm

Xataface uses client side validation as a default (in addition to server side). i.e. the 'client' option is set for all rules. If it is failing, you should check your browser for javascript errors to see why the code isn't running.
shannah
 
Posts: 4457
Joined: Wed Dec 31, 1969 5:00 pm

Live/Realtime Form Validation

Postby ADobkin » Sun Oct 24, 2010 9:42 pm

Thanks for the clarification. It turns out that it is working as documented.

What I meant to ask: Does Xataface offer support for live/realtime form entry validation, so that users are given immediate feedback rather than waiting until the form is submitted? My understanding is this requires the use of onBlur and/or onChange events. It appears the easiest way to do this is to extend HTML_QuickForm with the DHTMLRulesTableless package:

http://pear.php.net/package/HTML_QuickF ... Tableless/

Alternatively, there are some very interesting open-source libraries for more advanced form validation options, such as LiveValidation:
http://livevalidation.com/

Interesting html FORM Validators for web developers
http://woork.blogspot.com/2009/02/inter ... s-for.html

Impress your Web Visitors with real-time Form Validation
http://www.marketingtechblog.com/progra ... avascript/

Degradable Ajax Form Validation
http://particletree.com/features/degrad ... alidation/

Could something like this be added to Xataface?

Thanks,
Alan
ADobkin
 
Posts: 195
Joined: Mon Oct 22, 2007 7:31 pm
Location: Atlanta, GA, USA

Re: Client-Side Validation

Postby ADobkin » Thu Oct 28, 2010 6:26 am

Ironically, my main purpose for posting this topic turned out to be an incredibly simple solution. I wanted to limit the number of characters typed into a text field. Initially, I was using the widget:atts:size parameter, which only limits the size of the entry box but not the number of characters (i.e. it can scroll past the end of the box). Then I used the validators:maxlength form validation option, but that doesn't take effect until the user reaches the end of the form and clicks submit.

The simplest solution to limit the number of characters entered into a text box is:

widget:atts:maxlength = #

I did not see this mentioned on the "Getting Started" page about widgets, so I added a comment at the bottom.

It would still be nice to consider some of these fancy new validation scripts, but my problem is resolved now.

Thanks!
Alan
ADobkin
 
Posts: 195
Joined: Mon Oct 22, 2007 7:31 pm
Location: Atlanta, GA, USA


Return to Xataface Users

Who is online

Users browsing this forum: No registered users and 13 guests

Powered by Dataface
© 2005-2007 Steve Hannah All rights reserved