Are you looking for applying validations on your HTML form? Client-side validations are helpful to ensure all form fields are filled out and in a proper format. It helps users to fix any invalid data immediately. You should always have client-side validations on your website forms. If you skip it and apply only server-side validation, then it would delay the form submission in case of any errors.

Parsley is a useful form validation library that is easy to integrate. This library provides a better UX compared to default HTML5 validations. You need to write just a few statements and you are done. Parsley provides a rich set of options using which you can extend your custom validations. I am not going to cover each option. The purpose of this tutorial is to get you familiarized with Parsley and show you how to apply basic validations. One can explore their documentation and get acquainted with all features the library provides.

For this tutorial, I am going to create a simple form with a few fields like name, email, gender, etc. All form fields are compulsory and we will apply validations using Parsley on our form.

In order to validate the form using Parsley, we need to include its JS file. I will do it using CDN.

Parsley recommends using your own styling for error messages. But for testing purposes, you can use their CSS file available on this link.

How to Use Parsley

For the demo purpose, I am going to create a form using Bootstrap. So I will include Bootstrap using CDN along with Parsley files. I am also including jQuery as Parsley depends on it.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://parsleyjs.org/src/parsley.css" />
<div class="container">
    <form class="form-horizontal" id="signup_form">
        <div class="form-group">
            <label for="inputFirstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputFirstName" name="first_name" placeholder="First Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputLastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputLastName" name="last_name" placeholder="Last Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-4">
                <div class="gender">
                    <input type="radio" name="gender" value="male" required> Male
                    <input type="radio" name="gender" value="female" required> Female
                      
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Skills</label>
            <div class="col-sm-4">
                <div class="skills">
                    <input type="checkbox" name="skills[]" value="php" required> PHP
                    <input type="checkbox" name="skills[]" value="mysql" required> MySQL
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<script type="text/javascript">
    jQuery('#signup_form').parsley();
</script>

In the above code, I have included all required JS and CSS files using CDN. Finally, I used $('#signup_form').parsley(); where #signup_form is the form id. Now when you hit the Submit button directly, it will display the errors as shown in the screenshot below.

Once all errors are fixed, Parsley allows you to submit a form which you then take for server-side processing.

I hope you understand HTML form validation using Parsley. Please share your thoughts and suggestions in the comment section below.

Related Articles

• Deploy Static Website on Firebase Hosting for Free
• Get YouTube Video List By Keywords Using YouTube Search API and JavaScript
• How to Connect Firebase Realtime Database to Your Website Form

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.