Validating a Form with Parsley.js

Features of Parsley.js

The following are the features of Parsley.js:

• Built-in Validation rules: Parsley.js contains a large number of predefined rules that can be used for the validation of different input fields. These rules ensure the correct format is being followed.
   
• Customized rules: Along with the built-in rules, users are free to create their own rules to specify their requirements. This makes it more flexible and convenient for developers.
   
• Easy to implement: Parsley.js can be easily added to any web application without the need for any extra knowledge. The CSS and JavaScript files are only needed to be included in the project.
   
• Error messages: In case of violation of the rules, Parsley.js can be used to provide real-time feedback to the user by using the error messages. You can add custom error messages to the form according to the rule.
   

Validating a Form with Parsley.js

Let’s dive into a real-world example of Form validation. Follow the below-mentioned steps, and you will end up with a Signup form for your website.

Include jQuery and Parsley.js

First, you need to include jQuery, as Parsley.js relies on jQuery (>= 1.8). Both jQuery and Parsley.js can be included in two ways, either using a CDN link or by downloading the files and including it manually.

The CDN links can be included as below in the head section.

<script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.js"></script>

Creating a Basic HTML Form

Create a basic HTML form including an input tag for Full Name, Email ID, Password, and a button for submitting the form. 

<div class="container">
  <h3>Create Account</h3>
  
  <form action="" class="signup" id="cnform" method="post">
    <input name="name" id="name" placeholder="Enter Full Name" />
    <input name="email" id="email" placeholder="Enter Email ID" />
    <input name="password" id="password" placeholder="Create Password" />
    <button type="submit">Sign Up</button>
  </form>
  
</div>

Add some styling using the following CSS.

.container {
    height: 500px;
    width: 500px;
    background-color: #92c3fb;
    padding: 20px;
}

input {
    color: black;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 20px;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 250px;
}

input::placeholder {
    color: black;
}

button {
    background-color: black;
    color: white;
    border: 1px solid black;
    border-radius: 20px;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 269px;
}

After following the above steps, your form will end up looking like this.

Add Validation Attributes and Initialize Parsley

Parsley utilizes HTML attributes to define validation rules. We will use the following attributes in our form:

• required: Indicates that the field is required.
   
• data-parsley-type: Specifies the expected data type (e.g., "email", "number").
   
• data-parsley-minlength: Defines the minimum length of the input.
   
• data-parsley-error-message: Custom error message for a specific rule.
  
   

Add these attributes in the input tag, and include data-parsley-validate in the form tag.

<form action="" class="signup" id="cnform" method="post" data-parsley-validate>
	<input
		name="name"
		id="name"
		placeholder="Enter Full Name"
		required
		data-parsley-required-message="Name is required"
	/>
	<input
		name="email"
		id="email"
		placeholder="Enter Email ID"
		required
		data-parsley-required-message="Email is required"
		data-parsley-type="email"
		data-parsley-type-message="Enter a valid email address"
	/>
	<input
		name="password"
		id="password"
		placeholder="Create Password"
		required
		data-parsley-required-message="Password is required"
		data-parsley-minlength="12"
		data-parsley-minlength-message="Password must be at least 12 characters"
	/>
	<button type="submit">Sign Up</button>
</form>

Now, you need to initialize the Parsley after your form is loaded. This can be done by adding the following script tag at the end of the body tag.

<script>
      $(document).ready(function () {
        $("#cnform").parsley();
      });
</script>

Customize the Error Message

You can explicitly customize the error message by including the CSS. Let’s change the color of the error message to red. Just add the following code in the CSS file for the same.

.parsley-errors-list {
    color: red;
}

With this, you’re done. Now, the moment of truth.

Output

Let’s try to submit the form with the wrong information and see the results.

Let’s understand the error messages:

• Since the name section is empty and we have put a constraint of required, the error message shows Name is required.
   
• The Email ID is not valid as @ is missing in it.
   
• We have set the minimum length constraint in the password, so it should be a minimum of 12 characters long. 
   

Frequently Asked Questions

What is a real-life use of Parsley.js?

Parsley.js is used for validating a form. So, let’s say you have a form to create accounts for new users on your website. It can be used to expose certain restrictions on details entered by users like; passwords must contain a capital character and must be 12 characters long.

Is it difficult to use Parsley.js?

Parsley.js is designed to be user-friendly. You don't need to be a coding expert to use it. The library provides you with simple instructions and tools to make sure your forms are validated without needing to know complex programming.

What is the disadvantage of Parsley.js?

Using Parsley.js can add a bit of overhead to your web page since it requires loading and executing JavaScript code. This could potentially impact the loading speed of your page, especially on slower devices or connections.

Conclusion

In this article, we discussed, in brief, Parsley.js, its features and how it can be used to validate a form in HTML. We have seen the implementation of the same. Hope you have learned something useful through this article.

To learn more about JavaScript, you can read these articles.

• JavaScript with HTML
• JavaScript Projects
• JavaScript Applications

Refer to our Guided Path to upskill yourself in DSA, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. For placement preparations, you must look at the problems, interview experiences, and interview bundles.

We wish you Good Luck! 

Happy Learning!