OnKeyup jquery validate method not working selectbox

Question

私はフォームを持っており、jquery validate pluginを使用しました。私は、トリガーエラーのためにフォーカスアウト&のキーアップ機能を使用しました。そのすべての入力はうまく動作しますが、選択ボックスでは機能しません。

次のフィールドに塗りつぶさずに移動すると、警告が表示されます。アラートが表示された後、開始されると、アラートメッセージは要件を満たしたときに表示されませんでした。

しかし、それは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/

Answer 1

？

1. あなたはfalseからonclickを設定することにより、それを壊れましたが、あなたはまた、次の問題を持っているので、あなたはおそらくそれを実現していない：

2. ありinlineErrorsと呼ばれる全くないようなオプションとonkeydown。あなたは言葉を作ったり盲目の推測をすることはできません：Refer to the documentation for the only valid options、これらの行を削除します。

3. ignore: ':hidden'を持つ理由はありません。この値はデフォルト値とまったく同じです。この行を削除します。

4. onsubmitをtrueに設定することはできません。これは既定の動作で、onsubmitオプションの場合はdocumentation specifically states that "true is not a valid value"です。無効にするにはfalseに設定するか、デフォルトを上回る機能に設定するだけです。このオプションをtrueに設定すると、基になるデフォルト機能が"true"で上書きされ、予期しない動作につながる可能性があります。この行を削除します。

5. 明らかにあなたは「熱心な」検証をしたいので、カスタムのonfocusoutとonkeyup関数をすぐに検証するように設定しました。問題は.valid()の使用がonkeyupにあることです。 onfocusoutのように、.element()を使用する必要があります。 .element()メソッドは、これをから.validate()にするより適切な方法です。 .valid()以外のコードをの.validate()にのみ使用してください。そうしないと、特定の状況でJa​​vaScriptがループに陥る可能性があります。

6. HTML内にrequired属性をインライン化する理由はありません。 requiredルールは、両方のフィールドのrulesオブジェクト内で既に宣言されています。冗長なので、これらのHTML5属性を削除できます。 falseからonclickの設定

はあなたの苦情の根本的な原因です。 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/