Jquery表单提交验证答案

【问题标题】：Jquery form submit validationJquery表单提交验证
【发布时间】：2012-11-24 12:19:37
【问题描述】：

我有以下表格：

<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
});

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

【问题讨论】：

标签： jquery validation jqxwidgets

【解决方案1】：

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

例如：

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

【讨论】：

好的，谢谢。能否请您举一个使用上述jquery函数的示例。

【解决方案2】：

请试试这个：

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

【讨论】：

【解决方案3】：

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

PS：jqxValidator 是来自jQWidgets framework 的方法？如果您（读者）不需要如此繁重/复杂的插件，请参阅下面的纯 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);

【讨论】：