Changes for page Creating a form with validation and tooltips
Last modified by Alexander Colesnicov on 2020/01/28
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -308,56 +308,6 @@ 308 308 }); 309 309 {{/code}} 310 310 311 -== Client sidevalidation with LiveValidation ==311 +== Client Side Validation == 312 312 313 -It's important to have server side validation for security and because not everyone uses JavaScript but client side validation while the user types can improve the user's experience and save server load from forms submitted over and over again. To do validation on the client side you have to use the LiveValidation JavaScript code. You can define your own style for validation error messages or you can use the style sheet which is used by [[XWiki.Registration>>extensions:Extension.Administration Application#HVerifiedRegistrationPage28SinceEnterprise2.2M229]]. 314 - 315 -Here is a simple example of how to use LiveValidation in XWiki: 316 - 317 -{{code language="none"}} 318 -{{velocity}} 319 -$xwiki.get('jsfx').use('uicomponents/widgets/validation/livevalidation_prototype.js') 320 -$xwiki.get('ssfx').use('uicomponents/widgets/validation/livevalidation.css') 321 -{{/velocity}} 322 -{{html}} 323 -<form action=""> 324 -<label for="helloField">Say hello to LiveValidation:</label> 325 -<input id="helloField" length="20" type="text"> 326 -</form> 327 -<script> 328 -/* <![CDATA[ */ 329 -document.observe('dom:loaded', function() { 330 -var helloField = new LiveValidation("helloField", { validMessage: "Hi There.", wait: 500} ); 331 -helloField.add( Validate.Presence, { failureMessage: "Say Something, anything..."} ); 332 -helloField.add( Validate.Format, { pattern: /^[Hh]ello$/, failureMessage: "How about saying 'Hello'?"} ); 333 -});// ]]> 334 -</script> 335 -{{/html}} 336 -{{/code}} 337 - 338 -The result is this: 339 - 340 -{{velocity}} 341 -$xwiki.get('jsfx').use('uicomponents/widgets/validation/livevalidation_prototype.js') 342 -$xwiki.get('ssfx').use('uicomponents/widgets/validation/livevalidation.css') 343 -{{/velocity}} 344 - 345 -{{html}} 346 -<form action=""> 347 -<label for="helloField">Say hello to LiveValidation:</label> 348 -<input id="helloField" length="20" type="text"> 349 -</form> 350 -<script> 351 -/* <![CDATA[ */ 352 -document.observe('dom:loaded', function() { 353 -var helloField = new LiveValidation("helloField", { validMessage: "Hi There.", wait: 500} ); 354 -helloField.add( Validate.Presence, { failureMessage: "Say Something, anything..."} );none 355 -helloField.add( Validate.Format, { pattern: /^[Hh]ello$/, failureMessage: "How about saying 'Hello'?"} ); 356 -});// ]]> 357 -</script> 358 -{{/html}} 359 - 360 -This example shows validation of [[presence>>http://livevalidation.com/documentation#ValidatePresence]] (something must be written) and validation of [[format>>http://livevalidation.com/documentation#ValidateFormat]] (testing against a regular expression). Notice how the first line of Javascript says **new LiveValidation("helloField")**. This binds the validation to field with the id "helloField". Text validation also works on TextAreas. There are more types of validation which are documented in the [[LiveValidation documentation>>http://livevalidation.com/documentation]]. 361 - 362 -To change the look and feel of the error message, you may define your own CSS [[skin extension>>platform:DevGuide.SkinExtensionsTutorial]] instead of using the one provided. 363 -All validation messages are of the class (% class="LV_validation_message" %)##LV_validation_message##(%%). The error messages are of the class (% class="LV_invalid" %)##LV_invalid##(%%) and the valid messages are of class (% class="LV_valid" %)##LV_valid##(%%). LiveValidation will also detect submitnone buttons and bind to them, blocking them if fields are invalid. There are ways around this such as using prototype's [[Event.stopObserving>>http://prototypejs.org/doc/latest/dom/Event/stopObserving/]] function. 313 +It's important to have server side validation for security (the client side validation can be easily bypassed) but client side validation as you type can improve the user's experience and save server load from forms submitted over and over again. To do validation on the client side we recommend using the standard [[HTML5 form validation>>https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation]] as much as possible or a jQuery plugin such as [[jQuery Validation Plugin>>https://github.com/jquery-validation/jquery-validation/]].