1. Trang chủ
  2. Câu hỏi và trả lời
  3. Cách xóa, xóa hoặc đặt lại trạng thái xác thực biểu mẫu HTML5 sau "setCustomValidity (" ... ");"?

Cách xóa, xóa hoặc đặt lại trạng thái xác thực biểu mẫu HTML5 sau "setCustomValidity (" ... ");"?

2011-09-09 31 views
22

Làm cách nào để xóa, xóa hoặc đặt lại trạng thái xác thực biểu mẫu HTML5 sau setCustomValidity("...");?Cách xóa, xóa hoặc đặt lại trạng thái xác thực biểu mẫu HTML5 sau "setCustomValidity (" ... ");"?

Đặt chuỗi trống, setCustomValidity("");, trong Firefox và Chrome đóng thông báo lỗi xác thực biểu mẫu. Tôi không muốn đóng thông báo lỗi xác thực biểu mẫu. Tôi muốn đặt lại trạng thái xác thực để câu trả lời tiếp theo có thể được kiểm tra và cũng để giữ thông báo lỗi xác thực được hiển thị. Nếu trạng thái xác thực không được đặt lại, thì ngay cả câu trả lời chính xác tiếp theo cũng sẽ hiển thị thông báo lỗi xác thực sai.

Vậy bằng cách nào đó, "rõ ràng" có nghĩa là "đóng"?

Nếu đối số là chuỗi trống, hãy xóa lỗi tùy chỉnh.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api

Đây là một trường hợp thử nghiệm xác nhận:

<!DOCTYPE html> 
<html dir="ltr" lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Validation test case</title> 
    </head> 
    <body> 
     <form id="testForm"> 
      <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/> 
      <input type="submit" value="OK"/> 
     </form> 

     <script> 
      /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */ 
      (function() 
      { 
       "use strict"; 

       var form = null; 
       var answer = null; 

       var isCorrectAnswer = function (value) 
       { 
        return (value === "a"); 
       }; 

       var closeValidation = function (element) 
       { 
        // Close the form validation error message if displayed. 
        element.blur(); 
        element.focus(); 
       }; 

       var validateForm = function (event) 
       { 
        event.preventDefault(); 
        event.stopPropagation(); 

        var isValidForm = event.target.checkValidity(); 
        if (isValidForm) 
        { 
         if (isCorrectAnswer(answer.value)) 
         { 
          form.reset(); 
          closeValidation(answer); 

          console.log("Correct answer."); 
          alert("Correct answer."); 
         } 
         else 
         { 
          console.log("Incorrect answer."); 
          answer.setCustomValidity("Incorrect answer."); 
          answer.checkValidity(); 
          //answer.setCustomValidity(""); 
         } 
        } 
       }; 

       window.addEventListener("DOMContentLoaded", function() 
       { 
        form = document.getElementById("testForm"); 
        answer = document.getElementById("answer"); 

        form.addEventListener("submit", validateForm, false); 
       }, false); 
      }()); 
     </script> 
    </body> 
</html>

Loại một câu trả lời không chính xác, bất kỳ chữ cái (s) nhưng "a", và nhấn Enter. Nhập câu trả lời đúng "a" và nhấn Enter.

Không có thay đổi đối với trường hợp kiểm tra, hành vi này giống nhau trong Opera, Firefox và Chrome (ngoại trừ các lỗi của Chrome). Thông báo lỗi xác nhận vẫn tồn tại bất kể câu trả lời là chính xác hay không chính xác.

Bây giờ, sau khi answer.setCustomValidity(""); không được chú ý, Opera sẽ xóa lỗi xác thực tùy chỉnh nhưng không đóng thông báo lỗi xác thực, đó là những gì tôi mong đợi. Mặt khác, Firefox và Chrome đều xóa lỗi xác thực tùy chỉnh và đóng thông báo lỗi xác thực (lỗi?).

BUG: Chrome không "checkValidity()" khi lần đầu tiên gọi.

Trong Chrome, answer.checkValidity(); không hiển thị thông báo xác thực sau lần gửi đầu tiên. Các lần gửi tiếp theo sẽ hiển thị thông báo lỗi xác thực.

http://code.google.com/p/chromium/issues/detail?id=95970

BUG: Trong Chrome, thông báo lỗi xác nhận được blanked nhưng không đóng cửa khi đầu vào thay đổi.

http://code.google.com/p/chromium/issues/detail?id=95973

Opera 11.51 Build 1087

Firefox 6.0.2

Google Chrome 13.0.782.220 m

Nguồn

2011-09-09 XP1

Trả lời

10

Một thông báo xác nhận tùy chỉnh không được hiển thị nếu setCustomValidity() là được gọi trong trình xử lý sự kiện 'submit'.

@tkent:

Tôi khẳng định Opera 11.50 làm việc như mong đợi của bạn, nhưng Firefox 6 và Chrome 14 thì không.

Tuy nhiên, hành vi của Chrome là đúng theo tiêu chuẩn.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm

  1. Nếu gửi từ nộp() phương pháp cờ không được thiết lập, và không xác nhận tình trạng các yếu tố nộp là sai sự thật, sau đó tương tác xác nhận ràng buộc của biểu mẫu và kiểm tra kết quả: nếu kết quả là số âm (xác nhận ràng buộc đã kết luận rằng có trường không hợp lệ và có thể thông báo cho người dùng về điều này), sau đó hủy bỏ các bước này.
  2. Nếu cờ gửi từ phương thức submit() không được đặt, sau đó kích hoạt một sự kiện đơn giản có thể hủy được gửi tên, theo mẫu. Nếu hành động mặc định của sự kiện bị ngăn chặn (tức là nếu sự kiện bị hủy) thì hãy hủy các bước này. Nếu không, tiếp tục (hiệu quả hoạt động mặc định là là để thực hiện việc gửi).

trình duyệt phải gọi xác nhận tương tác TRƯỚC 'submit' sự kiện là bắn. Bạn cần gọi setCustomValidity() trước khi gửi 'sự kiện' nếu bạn muốn trình duyệt hiển thị thông báo xác thực. Opera dường như xử lý các bước này theo thứ tự không chính xác. Lưu ý rằng checkValidity() trong mã của bạn không có hiệu lực. checkValidity() không bao giờ hiển thị thông báo xác thực .

http://code.google.com/p/chromium/issues/detail?id=95970

[Bug 11.287] mới: 'setCustomValidity' cuộc gọi trong phần tử nên sử dụng 'oninput' sự kiện ...

@Nick:

'setCustomValidity 'phần tử gọi điện nên sử dụng' oninput ' sự kiện ...

http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html

Re: [whatwg] yếu tố Form nhắn không hợp lệ

@Mounir Lamouri:

Vì vậy, những gì bạn làm là làm cho các yếu tố có giá trị trong trường hợp không hợp lệ mà đã quá muộn. Sau sự kiện không hợp lệ, Firefox sẽ cố gắng hiển thị giao diện người dùng bằng validationMessage trả về chuỗi trống khi biểu mẫu hợp lệ. Bạn nên hủy sự kiện nếu bạn không muốn có giao diện người dùng nào nhưng vẫn hủy quá trình gửi.Bạn nên sử dụng onchange/oninput (nhấn mạnh được thêm) để thay đổi trạng thái hợp lệ nếu bạn muốn biểu mẫu được gửi .

http://www.mail-archive.com/[email protected]/msg23762.html

Việc sửa chữa là để xác nhận đầu vào với "đầu vào" xử lý sự kiện thay vì "submit" xử lý sự kiện.

<!DOCTYPE html> 
<html dir="ltr" lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Validation test case</title> 
    </head> 
    <body> 
     <form id="testForm"> 
      <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/> 
      <input type="submit" value="OK"/> 
     </form> 

     <script> 
      /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */ 
      (function (console) 
      { 
       "use strict"; 

       var form = null; 
       var answer = null; 

       var isCorrectAnswer = function (value) 
       { 
        return (value === "a"); 
       }; 

       var closeValidation = function (element) 
       { 
        // Close the form validation error message if displayed. 
        element.blur(); 
        element.focus(); 
       }; 

       var validateForm = function (event) 
       { 
        event.preventDefault(); 
        event.stopPropagation(); 

        var isValidForm = event.target.checkValidity(); 
        if (isValidForm) 
        { 
         console.log("Correct answer."); 
         closeValidation(answer); 
         form.reset(); 
        } 
        else 
        { 
         console.log("Incorrect answer."); 
        } 
       }; 

       window.addEventListener("DOMContentLoaded", function() 
       { 
        form = document.getElementById("testForm"); 
        answer = document.getElementById("answer"); 

        form.addEventListener("submit", validateForm, false); 
        answer.addEventListener("input", function() 
        { 
         // Only show custom form validation error message if the value matches the pattern. 
         if (answer.value.match(new RegExp(answer.getAttribute("pattern")))) 
         { 
          answer.setCustomValidity(isCorrectAnswer(answer.value) ? "" : "Incorrect answer."); 
         } 
        }, false); 
       }, false); 
      }(window.console)); 
     </script> 
    </body> 
</html>

Nguồn

2011-09-09 07:37:33 XP1

+4

tl; dr: Không sử dụng setCustomValidity trong sự kiện 'gửi'. Nó có nghĩa là để được thiết lập trước khi sự kiện 'gửi' như trong sự kiện 'đầu vào' hoặc 'thay đổi'. – Keith

+0

Nhưng để có trải nghiệm người dùng nhất quán, tôi muốn có khả năng cho người dùng biết có điều gì đó sai với một trường cụ thể (ví dụ: không có người dùng đó), với cùng giao diện người dùng như phần còn lại của biểu mẫu của tôi. –

+5

Vì vậy, câu trả lời về cơ bản là 'setCustomValidity ('')': thiết lập một chuỗi trống hủy bỏ xác thực. – igneosaur

Các vấn đề liên quan

 Các vấn đề liên quan