How to implement form validation using jquery’s validationEngine?

2 years ago
Sophia Anderson
2 minutes

To implement form validation using the jQuery validationEngine plugin, you first need to include the related CSS and JavaScript files. You can download the latest versions from the plugin’s official website.

  1. Include CSS and JavaScript files.
<link rel="stylesheet" href="validationEngine/css/validationEngine.jquery.css" type="text/css" media="screen" />
<script src="jquery.js"></script>
<script src="validationEngine/js/jquery.validationEngine.js"></script>
<script src="validationEngine/js/jquery.validationEngine-zh_CN.js"></script>
  1. Create a form and add validation rules.
<form id="myForm">
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" class="validate[required]" />
  </div>
  
  <div>
    <label for="email">邮箱:</label>
    <input type="text" id="email" class="validate[required,custom[email]]" />
  </div>
  
  <div>
    <label for="phone">电话:</label>
    <input type="text" id="phone" class="validate[required,custom[phone]]" />
  </div>
  
  <input type="submit" value="提交" />
</form>
  1. Initialize the validationEngine plugin and add form validation.
$(document).ready(function() {
  $("#myForm").validationEngine();
});

When users submit the form, validationEngine will automatically validate whether the form input complies with the rules. If there are any validation errors, the corresponding error message will be displayed.

bannerAds