checkValidity để cập nhật UI

Question

Khi chúng tôi cố gắng gửi biểu mẫu HTML5, nó ngăn cản gửi biểu mẫu nếu một hoặc nhiều trường bắt buộc thiếu giá trị hoặc một số lỗi khác xảy ra (loại hoặc độ dài không khớp). Giao diện người dùng được cập nhật với các trường không hợp lệ được đánh dấu và trường không hợp lệ đầu tiên được tập trung. Hơn nữa, có một quả bóng/bong bóng gắn liền với trường không hợp lệ đầu tiên với một thông báo lỗi.

Bây giờ, nếu là biểu mẫu Ajax, chúng tôi gọi myForm.checkValidity() để xác nhận lỗi trước khi gửi cuộc gọi Ajax. Nhưng khi gọi checkValidity(), nó không ảnh hưởng đến giao diện người dùng với các trường không hợp lệ được đánh dấu và kèm theo bong bóng.

Có cách nào để gọi hành vi gốc của trình duyệt để xác thực, vì vậy chúng tôi có thể thấy bong bóng cùng với các trường không hợp lệ được đánh dấu và tập trung không?

Answer 1

Chỉ cần kích hoạt gửi biểu mẫu thực tế - http://jsfiddle.net/tj_vantoll/ZN29S/.

Một hình thức trình thực tế sẽ chạy checkValidity, hiển thị các lỗi bong bóng, hãy gọi invalid xử lý sự kiện khi cần thiết vv

Để đảm bảo rằng hình thức không thực sự nộp đơn giản bạn chỉ cần phải đính kèm một handler submit sự kiện <form> ngăn chặn hành động mặc định, sau đó thực hiện cuộc gọi AJAX.

Điều này hoạt động vì sự kiện submit sẽ không được kích hoạt trừ khi biểu mẫu đã đáp ứng tất cả các ràng buộc của nó (tức là có dữ liệu hợp lệ). Do đó, một cuộc gọi rõ ràng đến checkValidity là không cần thiết.

Chỉnh sửa (11/7/12) để giải quyết các nhận xét.

Bằng cách gửi gửi biểu mẫu thực tế trong trường hợp này, tôi chỉ đơn giản là đề cập đến việc gửi không phải AJAX được thực hiện bằng nút gửi. Để có được bong bóng gốc để hiển thị và tiêu điểm để thay đổi thành phần tử biểu mẫu thích hợp, đây là cách duy nhất để thực hiện điều này. Nếu không có nút gửi, bạn có thể tạo một nút ẩn và sử dụng nút đó để kích hoạt quá trình gửi; it will still work.

Tôi đồng ý rằng cách tiếp cận này ít hơn lý tưởng nhưng nó hoạt động trong all supporting browsers. Lý do duy nhất hack này được sử dụng thay vì gọi form.submit() là vì form.submit() không kích hoạt xác thực gốc. Đối với tôi vấn đề ở đây không phải là không có API để kích hoạt xác nhận, nhưng thay vì đó gọi form.submit() thì không. Thông số kỹ thuật cho biết rằng constraint validation sẽ được chạy bất cứ khi nào "tác nhân người dùng được yêu cầu xác thực hợp lệ các ràng buộc của biểu mẫu phần tử biểu mẫu". Tôi không biết tại sao gọi form.submit() sẽ không được áp dụng.

Cần lưu ý rằng checkValidity DOES chạy qua cùng một algorithm dưới dạng gửi biểu mẫu gốc. Do đó bạn được tự do turn off the default bubbles và thực hiện của riêng bạn. Ví dụ: this.