Last modified by Alexander Colesnicov on 2020/01/28

<
From version < 35.1 >
edited by Marius Dumitru Florea
on 2018/08/08
To version < 36.1 >
edited by Marius Dumitru Florea
on 2018/08/08
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -308,56 +308,6 @@
308 308  });
309 309  {{/code}}
310 310  
311 -== Client side validation 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/]].

Get Connected