[转载]Form Validation - jQuery EasyUI

[转载]Form Validation – jQuery EasyUI.

This tutorial will show you how to validate a form. The easyui framework provides a validatebox plugin to validate a form. In this tutorial we will build a contact form and apply the validatebox plugin to validate the form. You can then adapt this form to your own requirements.

View Demo

Build form

Let’s build a simple contact form with name, email, subject and message field:

  1. <div style=“padding:3px 2px;border-bottom:1px solid #ccc”>Form Validation</div>
  2. <form id=“ff” method=“post”>
  3. <div>
  4. <label for=“name”>Name:</label>
  5. <input class=“easyui-validatebox” type=“text” name=“name” required=“true”></input>
  6. </div>
  7. <div>
  8. <label for=“email”>Email:</label>
  9. <input class=“easyui-validatebox” type=“text” name=“email” required=“true” validType=“email”></input>
  10. </div>
  11. <div>
  12. <label for=“subject”>Subject:</label>
  13. <input class=“easyui-validatebox” type=“text” name=“subject” required=“true”></input>
  14. </div>
  15. <div>
  16. <label for=“message”>Message:</label>
  17. <textarea name=“message” style=“height:60px;”></textarea>
  18. </div>
  19. <div>
  20. <input type=“submit” value=“Submit”>
  21. </div>
  22. </form>

We add a class named easyui-validatebox to input markup so the input markup will be applied the validation according the validType attribute.

Prevent the form to submit when invalid

When users click the submit button of form, we should prevent the form to submit if the form is invalid.

  1. $(‘#ff’).form({
  2. url:‘form3_proc.php’,
  3. onSubmit:function(){
  4. return $(this).form(‘validate’);
  5. },
  6. success:function(data){
  7. $.messager.alert(‘Info’, data, ‘info’);
  8. }
  9. });

If the form is invalid, a tooltip message will show.

Download the EasyUI example:

easyui-form-demo.zip
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏