カスタム検証

Question

を検証私はidのフィールドを持っているmax-number

Max number:<input type="number" required id="max-number"> 

と3以上のフィールドの入力フィールド：

Example 1: <input type="number" class="min-num" data-slug="min-number" required id="example-num-1"/> <br/> 
Example 2: <input type="number" class="min-num" data-slug="min-number" required id="example-num-2"/> <br/> 
Example 3: <input type="number" class="min-num" data-slug="min-number" required id="example-num-3"/> <br/> <br/> 

フォームでこれらの例フィールド内の数字がどうあるべき提出フィールドが小さい場合id="max-number"

これらのフィールドの数値がmaxより大きい場合、カスタム検証メッセージを表示したいsage in id="max-number"'The max year should be greater than all examples.'

私はHTML5検証を使用してこれを試みましたが、達成できませんでした。

私は 'onblur'イベントを使ってこれを試みました。

Example 1: <input type="number" class="min-num" data-slug="min-number" required id="example-num-1" onblur="myFunction()"/> <br/> 
Example 2: <input type="number" class="min-num" data-slug="min-number" required id="example-num-2" onblur="myFunction()"/> <br/> 
Example 3: <input type="number" class="min-num" data-slug="min-number" required id="example-num-3" onblur="myFunction()"/> <br/> <br/> 

は、それから私は、すべての例の入力に実行されるJSコード作成しようとしました：

function myFunction() { 
    var maxNumber = parseInt($('#max-number').val()); 

    var textInputs = $(':input'); 
    var datas = textInputs.filter('[data-slug]'); 
    datas.each(
    function (i, e) { 
     if (e.value < maxNumber){ 
     console.log("000"); 
     $('#max-number').setCustomValidity('The max year should be greater than all examples.'); 
     }  
    } 
); 
} 

をしかし、これは動作しませんし、このエラー

uncaught typeerror: $(...).setcustomvalidity is not a function 

Iドンを与えますなぜ私はこのことができないのか分かりません：/

私はjsfiddle

を作成しました

Answer 1

.setCustomValidity()JQUERYに属していませんが、DOMを使用すると、それを使用するとうまくいきます。

Answer 2

問題は$("#max-number")がjQueryオブジェクトで、setCustomValidityを呼び出そうとしています。この関数は、HTMLSelectElement関数で、jQuery関数ではありません。

あなたは私がそこに書くものは何でも、$("#max-number")[0].setCustomValidity(....)

HEREがあなたのフィドル