Validating forms using Parsley.js-JS Tutorial-php.cn

Validating forms using Parsley.js

WBOY

Release： 2023-08-31 08:21:06

forward

1404 people have browsed it

使用 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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta <!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>Parsely.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>
</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>
   <input type="text" class="form-control" name="fullname" required="">
   <br /><br />
   <label for="email">Enter Your Email * :</label>
   <input type="email" class="form-control" name="email" data-parsleytrigger="change" required="">
   <br /><br />
   <label for="contactMethod">Please Enter Your Preferred Contact Method*:</label> Email: <input type="radio" name="contactMethod"id="contactMethodEmail" value="Email" required=""> Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
   <br /><br />
   <label for="hobbies">Enter Your Hobbies (Optional, but 2 minimum):</label>
   <p>
      Coding <input type="checkbox" name="hobbies[]" id="hobby1"value="ski" data-parsley-mincheck="2"><br> Walking <input type="checkbox"name="hobbies[]" id="hobby2" value="run"><br> Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br> Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br> Traveling <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br> Writing <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br></p>
   <p>
      <label for="heard">Heard about us via *:</label>
      <select 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>
   </p>
   <p>
      <label for="message">Message (20 chars min, 100 max) :</label>
      <textarea id="message" class="form-control" name="message" dataparsley- trigger="keyup" data-parsley-minlength="20" data-parsleymaxlength=" 100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validationthreshold="10"></textarea>
   </p>
   <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;
         });
      });
   </script>
</body>
</html>

Copy after login

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!