JQuery - 表单验证 - Onblur

Question

好的，我有一个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/

此外，在页面底部的链接有一堆评论。 其中一些评论引用设置模糊我只是不明白如何做到这一点。 感谢您的任何帮助。

Answer 1

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

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

然后设置模糊事件：

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

在这里看到它： http ： //jsfiddle.net/ryleyb/brUVZ/

Answer 2

您可以使用验证器'form'方法，请参阅文档 。

这会触发表单验证：

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

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

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

Answer 3

该插件的当前版本有一个名为'validateOnBlur'的函数，它将执行您所要求的操作。

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

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

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

Answer 4

我知道它已经太晚了，但我仍然想补充一点。 为submit和blur事件设置验证的非常简单的方法是：

$("#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;
}

试试看。

Answer 5

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

Answer 6

您应该将onfocusout选项设置为true（向下滚动以查看它）

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