兩個在其各自元素上執行相同動作的onmouseout事件

我有一個腳本，用於驗證在onmouseout事件中輸入的輸入。首先，當用戶將光標從第一個輸入移開時，驗證發生並顯示錯誤消息。我想要對第二個輸入執行相同的處理，也就是說，當光標從第二個輸入移開時會顯示一條錯誤消息。下面是我的代碼：兩個在其各自元素上執行相同動作的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>

當我移動光標從輸入清除彩妝，錯誤信息能夠被看見。但是當我對第二個輸入模型做同樣的處理時，沒有看到錯誤信息。任何想法我做錯了？

來源

2015-10-05 tabby

你只需要初始化一次吧..不是每個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); 
    }); 
});

來源

2015-10-05 11:49:53

我用你的代碼替換了整個javascript，但現在我什麼也沒有得到。我的控制檯上有這個錯誤：'Uncaught TypeError：i.settings [s] .call不是函數'。我需要添加其他東西嗎？ – tabby

請檢查更新後的答案..對不起，錯誤的解釋.. @tabby –

酷！正是我想要做的！非常感謝！投票答案！ – tabby

簡單，定義了同一類的兩個輸入要說類foo

和帶班檢查mouseout事件作爲標識符如：

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

來源

2015-10-05 11:51:49 sunil

兩個在其各自元素上執行相同動作的onmouseout事件

回答

相關問題