Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Knolx j query-form-validation-slides


Published on

Knolx j query-form-validation

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Knolx j query-form-validation-slides

  1. 1. jQuery Form Validation Plugin Anand Kumar Singh Software Consultant Knoldus Software LLP Email-
  2. 2. Agenda ➢ Why jQuery Form Validation? ➢ Goal of jQuery Form Validation. ➢ All built-in Validation methods. ➢ Example ➢ Integration with Play Framework
  3. 3. jQuery Form Validation ➢ This jQuery Plugin makes simple client side form validation easy. ➢ It makes a good choice if you’re building something new from scratch. ➢ The Plugin comes bundled with a useful set of validation methods. ➢ All bundled methods come with default error messages in English and translations into 37 other languages.
  4. 4. Goals The ultimate goal of this plugin is to make working with forms more fun for everyone. By improving the interaction, it is easier and less annoying for the user to fill out the form and submit it. To achieve this, it is important that the plugin is actually deployed on websites around the world, so a lot of focus is spent on making it easy for developers – that's you – to use the plugin. The plugin can never replace server side validation and doesn't intend to do so. Having both in place gives you the necessary security for your application, as well as improved usability.
  5. 5. List of built-in Validation methods A set of standard validation methods is provided: ➢ required – Makes the element required. ➢ remote – Requests a resource to check the element for validity. ➢ minlength – Makes the element require a given minimum length. ➢ maxlength – Makes the element require a given maxmimum length. ➢ rangelength – Makes the element require a given value range. ➢ min – Makes the element require a given minimum. ➢ max – Makes the element require a given maximum. ➢ range – Makes the element require a given value range. ➢ email – Makes the element require a valid email ➢ url – Makes the element require a valid url ➢ date – Makes the element require a date. ➢ dateISO – Makes the element require an ISO date. ➢ number – Makes the element require a decimal number. ➢ digits – Makes the element require digits only. ➢ creditcard – Makes the element require a credit card number. ➢ equalTo – Requires the element to be the same as another one
  6. 6. Some more methods are provided as add-ons, and are currently included in additional-methods.js in the download package. ➢ accept – Makes a file upload accept only specified mime-types. ➢ extension – Makes the element require a certain file extension. ➢ phoneUS – Validate for valid US phone number.
  7. 7. Example <html> <head> <title>Makes "field" always required. Nothing and blanks are invalid.</title> </head> <body> <form id="myform"> <label for="field">Required: </label> <input type="text" class="left" id="field" name="field"> <input type="submit" value="Validate!"> </form> <script src=""></script> <script src=""></script> <script src=""></script> <script> $( "#myform" ).validate({ rules: { field: { required: true } } }); </script> </body> </html>
  8. 8. Integration with Play Framework ● ● ● ● The live application is currently hosted at : The Github code for the project is at : Clone the project into local system Install play if you do not have it already. You can get it from here: ● Execute play compile to build the product ● Execute play run to execute the product ● jQuery Form Validation should now be accessible at localhost:9000
  9. 9. References ● ● jQuery Form Validation Plugin : Play Framework Form Helpers : .3/ScalaFormHelpers