Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Validating a Form with Parsley.js
In this tutorial, we will show how you can use Parsley.js, which is a JavaScript library that is mainly used to validate forms. Parsley helps in validating the forms in a very subtle and easy manner, and it is one of the widely used form validation libraries out there.
Features of Parsley.js
There are plenty of reasons why Parsley is a good choice for validating your JavaScript forms. Some of them are mentioned below.
-
Intuitive DOM API ? The DOM API allows you to use simple English inside your HTML tags, and Parsley will do the rest. There's no need for you to write a single JavaScript line even for simple form validations.
-
Dynamic form validations ? Parsley can easily detect form modifications and adapts to its validations accordingly.
-
Tons of validators ? There are tons of in-built validators that are present in parsley. We can also make use of Ajax validators if needed.
-
Highly Reliable ? It is bug free, and has been strongly tested as well.
-
UX Focused ? Parsley focuses on UI and UX, and we can even override almost every default behaviour of parsley to fit your exact needs.
How to Validate a Form Using Parsley
Now that we know a little about Parsley.js, it's time we focus on an example in which we will use Parsley. Consider the following "index.html" file in which we have a form with a simple JavaScript code embedded into it.
Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parsley.js Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { font-weight: bold; }
.form-control { margin: 5px 0; padding: 8px; }
.btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
.parsley-errors-list { color: red; font-size: 12px; }
</style>
</head>
<body>
<h2>Fill in the form and click the validate button at the bottom</h2>
<form id="demo-form" data-parsley-validate>
<label for="fullname">Enter Your Full Name * :</label><br>
<input type="text" class="form-control" name="fullname" id="fullname" required>
<br><br>
<label for="email">Enter Your Email * :</label><br>
<input type="email" class="form-control" name="email" id="email"
data-parsley-trigger="change" required>
<br><br>
<label>Please Enter Your Preferred Contact Method*:</label><br>
Email: <input type="radio" name="contactMethod" id="contactMethodEmail"
value="Email" required>
Phone: <input type="radio" name="contactMethod" id="contactMethodPhone"
value="Phone">
<br><br>
<label>Enter Your Hobbies (Optional, but 2 minimum):</label><br>
Coding <input type="checkbox" name="hobbies[]" id="hobby1" value="coding"
data-parsley-mincheck="2"><br>
Walking <input type="checkbox" name="hobbies[]" id="hobby2" value="walking"><br>
Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eating"><br>
Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleeping"><br>
Traveling <input type="checkbox" name="hobbies[]" id="hobby5" value="traveling"><br>
Writing <input type="checkbox" name="hobbies[]" id="hobby6" value="writing"><br>
<br>
<label for="heard">Heard about us via *:</label><br>
<select name="heard" id="heard" required>
<option value="">Choose..</option>
<option value="press">Press</option>
<option value="net">Internet</option>
<option value="mouth">Word of mouth</option>
<option value="other">Other..</option>
</select>
<br><br>
<label for="message">Message (20 chars min, 100 max) :</label><br>
<textarea id="message" class="form-control" name="message"
data-parsley-trigger="keyup"
data-parsley-minlength="20"
data-parsley-maxlength="100"
data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.."
data-parsley-validation-threshold="10"></textarea>
<br><br>
<input type="submit" class="btn btn-default" value="Validate">
</form>
<script>
$(function() {
$('#demo-form').parsley().on('field:validated', function() {
var ok = $('.parsley-error').length === 0;
$('.bs-callout-info').toggleClass('hidden', !ok);
$('.bs-callout-warning').toggleClass('hidden', ok);
})
.on('form:submit', function() {
return false; // Prevent actual form submission for demo
});
});
</script>
</body>
</html>
Key Parsley.js Attributes
The example above demonstrates several important Parsley.js attributes:
-
data-parsley-validate- Enables Parsley validation on the form -
required- Makes fields mandatory -
data-parsley-trigger- Specifies when validation occurs (change, keyup, etc.) -
data-parsley-mincheck- Minimum number of checkboxes that must be selected -
data-parsley-minlengthanddata-parsley-maxlength- Character limits for text fields -
data-parsley-minlength-message- Custom error message
How It Works
In this code, we have a form with multiple input fields that expect different types of values. Each field includes validation rules using Parsley's data attributes. When you click the "Validate" button without filling required fields, Parsley will display error messages. The validation occurs in real-time based on the trigger events you specify.
The JavaScript code at the bottom initializes Parsley and handles validation events. It prevents the form from actually submitting (for demonstration purposes) and can be customized to show different UI states based on validation results.
Conclusion
In this tutorial, we used a comprehensive example to demonstrate how you can use Parsley.js to validate forms in JavaScript. Parsley provides an intuitive way to add client-side validation with minimal JavaScript code, making it an excellent choice for form validation needs.
2K+ Views
