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

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

Type: Boolean or Function()

Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

Set to a Function to decide for yourself when to run validation.

A boolean true is not a valid value.

Example: Disables onblur validation.

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

回调传递了两个参数：

element

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

event

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

因此您可以在您的情况下使用回调函数，如下所示：

$('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 说 class foo

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

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

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

Two onmouseout events doing the same action on their respective elements

javascript

jquery

javascript-events