jquery - Jquery表单提交验证

Question

我有以下表格：

<form id="testForm" action="country_Save">
   Country Name:<input type="text" id="countryName" />  
   <input type="submit" id='saveCountry' value="Add Country" />
</form>

并遵循 JQuery 来验证文本字段

$('#testForm')
   .jqxValidator({  rules : [
          {
              input : '#countryName',
              message : 'Country Name is required!',
              action : 'keyup, blur',
              rule : 'required'
          }],
          theme : theme
});

提交表单时如何使用此验证？

Answer 1

将函数绑定到submit表单的事件。false如果任何表单字段验证失败，则在此函数中返回。

例如：

$('form').on('submit', function() {
    // do validation here
    if(/* not valid */)
        return false;
});

Answer 2

请试试这个：

     $('#testForm').on('submit', function() {
         return $('#testForm').jqxValidator('validate');
     });

Answer 3

表单验证有大量的 Javascript 和 jQuery 库...我的建议是一个简单的jquery.com 插件。

PS： jqxValidator是来自jQWidgets 框架的方法吗？如果您（读者）不需要如此繁重/复杂的插件，请参阅下面的纯 jQuery，否则 @Gajotres 编写了最佳解决方案（！）。

---

仅使用 jQuery 和基本的 Javascript。

对于“插件库”和“编写自己的验证方法”，首先检查是否需要直接使用 jQuery。

这里有一个代码可以完成问题所说的所有内容：模糊验证、keyup 和“提交时”。

function validate(){
    var cnv = $('#countryName').val();
    if (!$.trim(cnv)) {
        alert('Country Name is required!');
        return false;
    } else { return true; }
}

$('#testForm').submit(validate);
$('#countryName').bind('blur keyup', validate);