如何觸發 HTML5 驗證並在更改事件上設置自定義消息？

Question

我有輸入文本字段，它應該只允許數字值0-9並且長度應該正好是八位數字。 這應該由onChange事件控制。 用戶完成輸入驗證后，應觸發。 如果值正確，Ajax 請求將到達服務器，否則用戶應該像 HTML 5 驗證中的其他消息一樣看到該消息。 這是我的代碼示例：

 $('#userid').on('change', checkUser); function checkUser(e) { var fldObj = $(this); if (!e.target.checkValidity()) { fldObj[0].setCustomValidity('Invalid User ID.'); console.log(fldObj.val()); } else { //send ajax request console.log('User ID is valid!'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="userid" id="userid" value="" pattern="[0-9]{8}" placeholder="Enter User ID">

我的代碼工作不正常。 如果輸入無效值，我將看不到該消息。 如果有人知道消息未顯示的原因，請告訴我。

Answer 1

僅當輸入是表單的一部分時才報告有效性。 嘗試輸入無效值並在下面的代碼段中提交表單。

 $('#userid').on('change', checkUser); function checkUser(e) { var fldObj = $(this); if (!e.target.checkValidity()) { fldObj[0].setCustomValidity('Invalid User ID.'); fldObj[0].parentElement.reportValidity(); console.log(fldObj.val()); } else { //send ajax request console.log('User ID is valid!'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" name="userid" id="userid" value="" pattern="[0-9]{8}" placeholder="Enter User ID"> <button type="submit">Submit</button> </form>

如果您不想等待提交按鈕被點擊，請查看HTMLFormElement.reportValidity() 。