Cómo borrar, eliminar o restablecer el estado de validación de formulario HTML5 después de "setCustomValidity (" ... ");"?

Cómo borrar, eliminar o restablecer el estado de validación de formulario HTML5 después de setCustomValidity("...");?Cómo borrar, eliminar o restablecer el estado de validación de formulario HTML5 después de "setCustomValidity (" ... ");"?

Al configurar una cadena vacía, setCustomValidity("");, en Firefox y Chrome se cierra el mensaje de error de validación de formulario. No quiero cerrar el mensaje de error de validación de formulario. Quiero restablecer el estado de validación para que se pueda verificar la siguiente respuesta y también para mantener el mensaje de error de validación mostrado. Si el estado de validación no se restablece, incluso la siguiente respuesta correcta mostrará incorrectamente un mensaje de error de validación.

De alguna manera, "clear" significa "cerrar"?

Si el argumento es la cadena vacía, borra el error personalizado.

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

Aquí es un caso de prueba de validació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>

Tipo de una respuesta incorrecta, cualquier letra (s), pero "a", y pulse Intro. Escriba la respuesta correcta "a", y presione Entrar.

Sin cambios en el caso de prueba, el comportamiento es el mismo en Opera, Firefox y Chrome (excepto los errores de Chrome). El mensaje de error de validación persiste independientemente de si la respuesta es correcta o incorrecta.

Ahora, después de answer.setCustomValidity(""); no se ha comentado, Opera borra el error de validación personalizado pero no cierra el mensaje de error de validación, que es lo que espero. Por otro lado, Firefox y Chrome eliminan el error de validación personalizado y cierran el mensaje de error de validación (¿error?).

ERROR: Chrome no "checkValidity()" cuando se invoca por primera vez.

En Chrome, answer.checkValidity(); no muestra el mensaje de validación después del primer envío. Los envíos posteriores muestran el mensaje de error de validación.

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

ERROR: En Chrome, el mensaje de error de validación se queda en blanco, pero no cierra cuando se cambia la entrada.

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

Fuente

2011-09-09 XP1

no se muestra un mensaje de validación personalizada si setCustomValidity() es llamado en el controlador de eventos 'submit'.

@tkent:

confirmé Opera 11.50 trabajó como sus expectativas, pero Firefox 6 y Chrome 14 no lo hicieron.

Sin embargo, el comportamiento de Chrome es correcto de acuerdo con la norma.

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

Si el presentado Desde Enviar() bandera método no se establece, y el estado de no-validación del elemento remitente es falsa, entonces interactiva validar la restricciones de forma y examinar el resultado: si el resultado es negativo (la validación de la restricción concluyó que hubo campos no válidos y probablemente se informó al usuario de esto), entonces anule estos pasos.

Si el indicador de método submit from submit() no está configurado, entonces se inicia un evento simple que es cancelable denominado submit, en el formulario. Si se evita la acción predeterminada del evento (es decir, si se cancela el evento) , interrumpa estos pasos. De lo contrario, continúe (de hecho, la acción predeterminada es realizar la presentación).

navegadores deben invocar la validación interactiva ANTES 'enviar' caso se dispara. Debe llamar a setCustomValidity() antes del evento 'enviar' si desea que un navegador muestre un mensaje de validación. Opera parece manejar estos pasos en orden incorrecto. Tenga en cuenta que checkValidity() en su código no tiene ningún efecto de todos modos. checkValidity() nunca muestra un mensaje de validación .

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

[Bug 11287] Nuevo: Llamada 'setCustomValidity' en el elemento debe utilizar 'oninput' caso ...

@ Nick:

'setCustomValidity 'call in element debería usar' oninput ' evento ...

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

Re: [WHATWG] mensaje no válido elemento de formulario

@Mounir Lamouri:

lo tanto, lo que se hace es hacer que el elemento válido en el caso de los que no válido es demasiado tarde. Después del evento no válido, Firefox intenta mostrar la interfaz de usuario utilizando validationMessage que devuelve la cadena vacía cuando el formulario es válido. Debe cancelar el evento si no desea UI , pero aún así cancelar el envío.Debe usar onchange/oninput (énfasis añadido) para cambiar el estado de validez si desea que se envíe el formulario a .

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

La solución es para validar la entrada con la "entrada" controlador de eventos en lugar del controlador de eventos "enviar".

<!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>

Fuente

2011-09-09 07:37:33 XP1

tl; dr: No use setCustomValidity en el evento 'enviar'. Está destinado a establecerse antes del evento 'enviar', como en el evento 'entrada' o 'cambio'. – Keith

Pero para tener una experiencia de usuario coherente, quiero poder decirle al usuario que hay algún problema en un campo específico (por ejemplo, no existe), con la misma interfaz de usuario que el resto de mi formulario. –

Así que la respuesta es básicamente 'setCustomValidity ('')': al establecer una cadena en blanco se cancela la validación. – igneosaur

Cómo borrar, eliminar o restablecer el estado de validación de formulario HTML5 después de "setCustomValidity (" ... ");"?

Respuesta

Cuestiones relacionadas