JQuery - 表单验证 - Onblur答案

【问题标题】：JQuery - Form Validation - OnblurJQuery - 表单验证 - Onblur
【发布时间】：2012-02-08 08:33:03
【问题描述】：

好的，我有一个可以使用 jquery 验证的表单，但我想更进一步。它使用插件进行验证，但仅在提交时验证。我想知道是否有办法让它在模糊上进行验证，这样人们就不必等到他们点击提交才能知道他们是否有错误。

我下载了这个插件：

http://docs.jquery.com/Plugins/Validation

我在页面顶部包含了 js 插件文件，在该文件下我有 js：

 <script>
  $(document).ready(function(){
    $("#formid").validate();
  });
  </script>

当我提交表单时，验证工作正常。我只是想知道我需要添加什么才能验证模糊上的每个字段。

如果需要查看js文件可以查看或在这里下载

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

在页面底部的链接中还有一堆 cmets。其中一些 cmets 参考设置模糊我只是不明白如何去做。感谢您的任何帮助。

【问题讨论】：

标签： javascript jquery forms validation

【解决方案1】：

我能看到的最好方法是在 blur 事件中为您想要此行为的每个元素使用 $.validate.element(selector)：

var v = $('#formid').validate();

然后设置模糊事件：

$('#firstName').blur(function(){
   v.element('#firstName'); 
});

在此处查看实际操作：http://jsfiddle.net/ryleyb/brUVZ/

【讨论】：

【解决方案2】：

您可以使用验证器“表单”方法，请参阅documentation。

这会触发表单验证：

$('#formid').validate().form();

如果你想让它模糊，你可以使用这个：

$('#formid :input').blur(function() {
    $('#formid').validate().form();
});

【讨论】：

我不认为这很好——你是在用猎枪来打刀 :) $.validate() 做了很多工作，真的应该被称为 once 在document.ready 上。 validatorObj.element(<selector>) 是正确的函数。

【解决方案3】：

当前版本的插件有一个名为 'validateOnBlur' 的函数，可以满足您的要求。

如果您已将 #formid 的 id 应用于表单，您的代码应如下所示。

<script>
  $('#formid').validateOnBlur();
</script>

有关这方面的一些可靠文档，请访问他的 github 页面 -- https://github.com/victorjonsson/jQuery-Form-Validator

【讨论】：

【解决方案4】：

<script>
  $(document).ready(function(){
    $("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); });
  });
</script>

【讨论】：

如果您的插件允许，您可以在字段级别添加验证：代替$('#formid').validate();，您可以使用$(this).validate();

【解决方案5】：

您应该将onfocusout option 设置为true（向下滚动查看）

$("#formid").validate({
    rules: {
        // simple rule, converted to {required:true}
        required: "required",
    },
    onfocusout: true
});

【讨论】：

感谢您的建议。我已经尝试过了，但仍然只在提交时进行验证。没有模糊或焦点输出。还有其他建议吗？谢谢。
确实，这并不像您期望的那样工作 - 它强制验证 invalid 字段，即在第一次无效提交之后，并且 true 是默认值。

【解决方案6】：

我知道已经太晚了，但我还是想补充一下。设置提交和模糊事件验证的非常简单的方法是：

$("#MainForm").validate({
            onfocusout: function (element) {                    
                if ($(element).valid())
                {
                    $(element).removeClass('input-error').addClass('input-valid');
                }
            },                

            invalidHandler: function (event, validator) {
                $.each(validator.errorList, function (index, error) {
                    $(error.element).addClass('input-error');
                });
            },

            showErrors: function () {
                //This function is kept blank so as to hide the default validation messages.
            }
        });

CSS

.input-error {
    border-color: #FF1919;
    box-shadow: 0px 0px 10px #FF1919;
}
.input-valid {
    border-color:#009500;
    box-shadow: 0px 0px 10px #009500;
}

试一试。

【讨论】：