HTML5: Tại sao thuộc tính "oninvalid" của tôi cho phép mẫu bị lỗi?

Question

chút HTML5 trường mật khẩu này hoạt động hoàn hảo KHÔNG thuộc tính oninvalid (mô hình nói: tối thiểu 6 ký tự):

<form> 
    <input type="password" name="user_password_new" pattern=".{6,}" required />  
    <input type="submit" name="register" value="Register" /> 
</form> 

Xem jsFiddle here.

Nhưng khi tôi thêm một thuộc tính oninvalid đó đưa ra một thông báo lỗi tùy chỉnh khi đầu vào của người dùng không phù hợp với những mô hình, toàn bộ lĩnh vực KHÔNG BAO GIỜ có hiệu lực, xem mã ở đây:

<form> 
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />  
    <input type="submit" name="register" value="Register" /> 
</form> 

Xem jsFiddle here .

Bạn có thể phát hiện ra lỗi không?

Answer 1

Nếu bạn đặt giá trị bằng setCustomValidity() thì trường này không hợp lệ. Đó là thiết lập một chuỗi độ dài khác không làm cho trình duyệt xem xét trường không hợp lệ. Để cho phép các tác động của quy trình kiểm soát khác bạn phải xóa các giá trị tùy chỉnh:

<input type="password" name="user_password_new" pattern=".{6,}" required 
    oninvalid="setCustomValidity('Minimum length is 6 characters')" 
    oninput="setCustomValidity('')" /> 

Answer 2

Bạn có thể sử dụng title miễn là bạn không nhớ có 'You must use this format:' trước thông điệp của bạn. Nếu bạn muốn có một tin nhắn tùy chỉnh đầy đủ, số setCustomValidity() sẽ làm việc cho tôi.

Answer 3

Vì tôi tình cờ gặp vấn đề tương tự, đây là giải pháp của tôi - được thử nghiệm và làm việc với FF, Chrome, IE 10, Edge (tháng 2 năm 2017).

<form> 
 
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');"> 
 
<input type="email" required> 
 
<input type="submit"> 
 
</form>

Giải thích:

setCustomValidity(''); loại bỏ các chuỗi lỗi tùy chỉnh mà nếu không sẽ luôn dẫn đến một trường không hợp lệ tại quá trình xác nhận.

checkValidity(); thực hiện xác thực thủ công - giống như điều đang xảy ra ở biểu mẫu con. Kết quả được lưu trữ trong validity.valid.

Thứ hai setCustomValidity(validity.valid ? '' :'please enter 1234'); bây giờ đặt chuỗi lỗi theo kết quả xác thực. Nếu trường hợp lệ, nó cần phải rỗng, nếu không thì có thể thiết lập chuỗi lỗi tùy chỉnh.

Answer 4

Tôi thích sử dụng như thế này:

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/> 

Và cắm cho tất cả các dữ liệu đầu vào hợp lệ

UPD, điều một nhiều hơn cho công việc tốt hơn:

$("input").attr("onblur", "setCustomValidity('')"); 
    $("input").attr("oninput", "setCustomValidity(' ')");