OnKeyup jquery驗證方法不工作selectbox

-1

我有一個窗體並使用jquery validate插件。我使用了聚焦輸出&的觸發錯誤的鍵控功能。其工作正常，所有輸入，但不在選擇框中工作。OnKeyup jquery驗證方法不工作selectbox

當我們移動到下一個領域沒有填充時，它會顯示警報。警報可見後，如果開始填充，則在符合要求時隱藏警報消息。

但它在selectbox中不起作用。只需打開選擇框並關閉選擇框而不選擇任何內容。現在轉到下一個字段或提交。它顯示警報消息。這次選擇任何選項。但即使我們選擇了一個選項，警報信息仍然顯示。

如何使selectbox驗證如輸入？

我的腳本

$(function(){ 
    $("form").validate({ 
     ignore: ":hidden", 
     onclick: false, 
     //onfocusout: false, 
     onsubmit: true, 
     onkeydown: false, 
     inlineErrors: true, 
     onfocusout: function (element) { 
        this.element(element); 
       }, 
     onkeyup: function(element) { 
       $(element).valid() 
      },   
     rules: { 
      input: { 
       required: true, 
       minlength:5 
      }, 
      select: { 
       required: true 
      }, 

     }, 
     messages: { 
      input: "Required", 
      select: "Required", 
     }, 
    }); 
});

我的形式

<form> 
<input type="text" name="input" required> 
<select name="select" required> 
<option value="">Please Select</option> 
<option value="one">One</option> 
<option value="two">Two</option> 
<option value="three">Three</option> 
</select> 
<input type="submit" value="Submit"> 
</form> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

這裏我的小提琴https://jsfiddle.net/4nqpd3uv/

來源

2017-06-16 Bhavan Kumar Natarajan

請學習如何正確使用jsFiddle關於包括圖書館和外部資源。 – Sparky

如何使輸入等選擇框驗證？

你已經通過設置onclick到false打破它，但你可能沒有意識到這一點，因爲你也有以下問題：
有絕對沒有這樣的選項叫inlineErrors和onkeydown。你不能只是拼寫單詞或盲目猜測：Refer to the documentation for the only valid options，並刪除這些行。
沒有理由擁有ignore: ':hidden'，因爲該值與默認值完全相同。刪除這一行。
您不能將onsubmit設置爲true。這已經是默認行爲，onsubmit選項是documentation specifically states that "true is not a valid value"。您只能將其設置爲false以禁用，或者超出默認值的功能。當您將此選項設置爲true時，您會覆蓋"true"的潛在默認功能，這可能會導致不可預知的行爲。刪除這一行。
顯然你想「渴望」驗證，所以你已經設置了你自定義的onfocusout和onkeyup函數來立即驗證。問題是您在onkeyup內使用.valid()。您應該使用.element()，就像您在onfocusout中所做的一樣。 .element()方法是從在.validate()內做到這一點的更正確的方法。只使用.valid()以外的.validate()，否則，您可能會在某些情況下將JavaScript引入循環。
沒有理由在您的HTML內嵌入required屬性。您的required規則已在rules對象中爲這兩個字段聲明。這是多餘的，所以你可以刪除這些HTML5屬性。

設置onclick到false是您投訴的根源。當您從select元素中選擇一個選項時，將刪除驗證觸發器。您不能將其設置爲true，因此請刪除此行。（爲onclick官方文檔中缺少有關select元素的信息，所以我已經提交了修改，以解決這個問題）

工作代碼：

$("form").validate({ 
    // REMOVE THESE COMMENTED LINES 
    // ignore: ":hidden", // <- exactly the same as DEFAULT 
    // onclick: false,  // <- disables select validation - ROOT PROBLEM! 
    // onfocusout: false, // <- duplicate, see below 
    // onsubmit: true,  // <- must NOT set to true! 
    // onkeydown: false,  // <- NO SUCH OPTION! 
    // inlineErrors: true, // <- NO SUCH OPTION! 
    onfocusout: function(element) { 
     this.element(element); // <- eager validation 
    }, 
    onkeyup: function(element) {  
     this.element(element); // <- eager validation 
    }, 
    rules: { 
     input: { 
      required: true, // remove inline HTML5 'required' attribute 
      minlength: 5 
     }, 
     select: { 
      required: true // remove inline HTML5 'required' attribute 
     } 
    }, 
    messages: { 
     input: "Required", 
     select: "Required", 
    }, 
});

DEMO：jsfiddle.net/qu2jgj22/

來源

2017-06-16 15:10:11 Sparky

OnKeyup jquery驗證方法不工作selectbox

回答

相關問題