Validating forms using Parsley.js

In this tutorial, we will show you how to use Parsley.js, a JavaScript library mainly used for validating forms. Parsley helps to validate forms in a very subtle and simple way and it is one of the widely used form validation libraries.

Function of Parsley.js

There are many reasons why Parsley is a good choice for validating JavaScript forms. Some of them are mentioned below.

• Intuitive DOM API - The DOM API allows you to use plain English in HTML markup and Parsley will do the rest. Even for simple form validation, you don't need to write a single line of JavaScript.

• Dynamic Form Validation - Parsley makes it easy to detect form modifications and adapt its validation accordingly.

• Lots of validators - A large number of built-in validators exist in Parsley. We can also use an Ajax validator if needed.

• Highly Reliable - It is bug-free and rigorously tested as well.

• User Experience Focused - Parsley specializes in UI and UX, and we can even override almost all of Parsley's default behaviors to fit your exact needs.

How to use Parsley validation form

Now that we have some understanding of Parsley.js, it's time we focus on an example using Parsley. Consider the following "index.html" file, in which we have a form with simple JavaScript code embedded in it.

Example

index.html

   
   
   
   
   
   
   
   
   



   
Fill in the form and click the validate button at the bottom
   

   Enter Your Full Name * :
   
   


   Enter Your Email * :
   
   


   Please Enter Your Preferred Contact Method*: Email:  Phone: 
   


   Enter Your Hobbies (Optional, but 2 minimum):
   

      Coding 
 Walking 
 Eating 
 Sleeping 
 Traveling 
 Writing 

   

      Heard about us via *:
      
         Choose..
         Press
         Internet
         Word of mouth
         Other..
      
   
   

      Message (20 chars min, 100 max) :
      
   
   

   
   
   

Click the Edit and Run button at the top to run this code and see the output form.

illustrate

In this code, we have a form with multiple text areas that require different values. In each value we have a text keyword, a checkbox or an option.

Additionally, there is a "Verify" button at the end of the code. You'll get popup errors from Parsley when you click the button without filling out any form, and you'll get validation errors from Parsley.js when some of the fields you enter don't match their expectations .

You can run this code here and fill in the different fields based on your chosen testing purpose.

in conclusion

In this tutorial, we use a simple example to demonstrate how to validate a form in JavaScript using Parsley.js.

The above is the detailed content of Validating forms using Parsley.js. For more information, please follow other related articles on the PHP Chinese website!