HTML5或jQuery驗證中的自定義驗證

Question

我有一個ID為max-number的字段

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

和三個或更多字段輸入字段：

 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"的字段

如果這些示例字段中的數字大於最大值，我想在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

我不知道為什么我不能這樣做：/

我創建了一個jsfiddle

Answer 1

.setCustomValidity()不屬於JQUERY但DOM使用$('#max-number')[0]來使用它。

Answer 2

問題是$("#max-number")是一個jQuery對象，您正嘗試在其上調用setCustomValidity 。 此函數是HTMLSelectElement函數，而不是jQuery函數。

您應該使用$("#max-number")[0].setCustomValidity(....)

這里是您的提琴的工作版本