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

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

这会触发表单验证：

$('#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

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

Answer 5

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

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

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

试一试。

JQuery - 表单验证 - Onblur

6 个答案: