Question

我有一个脚本可以验证在onmouseout事件中输入的输入。首先，当用户将光标移离第一个输入时，将进行验证并显示错误消息。我想用第二个输入执行相同的处理，也就是说，当光标远离第二个输入时显示错误消息。以下是我的代码：

<script type="text/javascript">
     $('document').ready(function () {
         $('#Make').on('mouseout', function () {
             $("#carform").validate({
                 rules: {
                     Make: {
                         required: true
                     }
                 },
                 messages: {
                     Make: {
                         required: "Please enter a make"
                     }
                 },
                 submitHandler: function (form) {
                     form.submit();
                 }
             });
             if ($("#carform").valid()) {
                 //Do some code
             }
         });
         $('#Model').on('mouseout', function () {
             $("#carform").validate({
                 rules: {
                     Model: {
                         required: true
                     }
                 },
                 messages: {
                     Model: {
                         required: "Please enter a model"
                     }
                 },
                 submitHandler: function (form) {
                     form.submit();
                 }
             });
             if ($("#carform").valid()) {
                 //Do some code
             }
         });
     });

</script>

我的观点：

<div>
    <form id="carform" method="post">
        <p>
            @Html.LabelFor(l=>l.Make)
            @Html.TextBoxFor(l => l.Make)
        </p>
        <p>
            @Html.LabelFor(l=>l.Model)
            @Html.TextBoxFor(l => l.Model)
        </p>
        <p>
            <input id="createCar" type="submit" value="Submit"/>
        </p>
    </form>

</div>

当我将光标移离输入Make时，会看到错误消息。但是当我对第二个输入模型执行相同操作时，看不到错误消息。知道我做错了吗？

Answer 1

您只需要初始化一次..不在每个input blur上，并且jquery validation中的选项在blur上有效，如下所示：

onfocusout

输入：布尔值或函数（）

在模糊上验证元素（复选框/单选按钮除外）。如果   没有输入，所有规则都被跳过，除非字段是   已被标记为无效。

设置为函数以自行决定何时运行验证。

boolean true不是有效值。

示例：禁用onblur验证。

$(".selector").validate({
  onfocusout: false //Do not use false instead use a callback function
});

回调传递两个参数：

元素

类型：元素当前正在验证的元素，作为DOMElement。

事件

类型：事件此焦点事件的事件对象。

所以你可以在你的情况下使用如下的回调函数：

$('document').ready(function () {
    $("#carform").validate({
          onfocusout: function(element) {
               this.element(element);
          },
          rules: {
                 Make: {
                       required: true
                 },
                 Model: {
                     required: true //keep both the required here
                 }
          },
          messages: {
                 Make: {
                       required: "Please enter a make"
                 },
                 Model: {
                       required: "Please enter a model" //keep both the messages here
                 }
          },
          submitHandler: function (form) {
                 if ($(form).valid()) { //check for valid form here
                    form.submit()//submit here
                 }
          }
    });

   $('#Make,#Model').on('blur', function() {
        $("#carform").validate().element( this );
   });
});

Answer 2

简单，为两个输入定义一个相同的类，如class foo

并使用类检查mouseout事件作为标识符，如：

$('.foo').on('mouseout', function () {
 // your code here
});

两个onmouseout事件对其各自的元素执行相同的操作

2 个答案: