Validación en HTML5. : classe no válido después de enviar

Question

Estoy construyendo un formulario y quiero usar el selector :invalid para dar a los campos de entrada "necesarios" un borde rojo si el usuario presiona enviar sin rellenarlos, pero al usarlos aparece resaltado cuando la página carga Parece poco amistoso dar este tipo de advertencia al usuario incluso antes de darle la oportunidad de llenarlos al menos una vez.

¿Hay alguna manera de que estos campos aparezcan resaltados solo después de intentar enviar el formulario, dicho de otra forma, hay una forma de ejecutar la validación solo después de hacer clic en enviar (o al menos perder el foco en los campos de entrada necesarios?)

Answer 1

No hay nada fuera de la caja.

Mozilla tiene su propia pseudoclass para algo muy similar llamado ': -moz-ui-invalid'. Si usted quiere lograr algo como esto, usted tiene que utilizar la validación restringida DOM-API:

if(document.addEventListener){ 
    document.addEventListener('invalid', function(e){ 
     e.target.className += ' invalid'; 
    }, true); 
} 

también puede utilizar webshims lib polyfill, que no sólo los navegadores polyfill incapaces, sino que también añade algo similar como -moz- no válido para todos los navegadores (.form-ui-invalid).

Answer 2

Otra forma es agregar una clase hide-hints a las entradas con JavaScript en carga. Cuando un usuario modifica un campo, se elimina la clase.

En su CSS, aplique el estilo al input:not(.hide-hints):invalid. Esto significa que el estilo de error también se mostrará para usuarios sin JavaScript.

Answer 3

para la validación 'necesaria'

forma 1 - set 'necesaria' atributo para cada elemento en forma de presentar

// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute for each element 
    $('#elm1, #elm2').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 

forma 2 - atributo 'los datos de uso

<input type="text" data-required="1"> 

<script type="text/javascript"> 
// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute based on data attribute 
    $(':input[data-required]').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 
</script> 

Answer 4

Viejo la pregunta, pero para las personas que podrían encontrarla útil: hice un pequeño guión que agrega una clase a un formulario cuando se intenta enviarlo, de modo que puede aplicar estilos a los formularios que han sido o no han sido ttempted que se presentará de manera diferente:

window.addEventListener('load', function() { 

    /** 
    * Adds a class `_submit-attempted` to a form when it's attempted to be 
    * submitted. 
    * 
    * This allows us to style invalid form fields differently for forms that 
    * have and haven't been attemted to submit. 
    */ 
    function addFormSubmitAttemptedTriggers() { 

     var formEls = document.querySelectorAll('form'); 

     for (var i = 0; i < formEls.length; i++) { 

      function addSubmitAttemptedTrigger(formEl) { 

       var submitButtonEl = formEl.querySelector('input[type=submit]'); 

       if (submitButtonEl) { 
        submitButtonEl.addEventListener('click', function() { 
         formEl.classList.add('_submit-attempted'); 
        }); 
       } 

      } 

      addSubmitAttemptedTrigger(formEls[i]); 

     } 

    } 

    addFormSubmitAttemptedTriggers(); 

}); 

Ahora formas que se intentan para ser presentado obtendrá una clase _submit-attempted, por lo que sólo se puede dar a estos campos de un cuadro rojo sombra:

input { 
    box-shadow: none; 
} 

form._submit-attempted input { 
    box-shadow: 0 0 5px #F00; 
} 

Answer 5

he utilizado este enfoque para un proyecto de la mina, por lo que los campos no válidos serían expuestos sólo después de presentar:

HTML:

<form> 
    <input type="email" required placeholder="Email Address"> 
    <input type="password" required placeholder="Password"> 
    <input type="submit" value="Sign in"> 
</form> 

CSS:

input.required:invalid { 
    color: red; 
} 

JS (jQuery):

$('[type="submit"]').on('click', function() { 
    // this adds 'required' class to all the required inputs under the same <form> as the submit button 
    $(this) 
     .closest('form') 
     .find('[required]') 
     .addClass('required'); 
}); 

Answer 6

muy sencilla sólo tiene que utilizar #ID: inválido: centrarse

Esto sólo lo hace la validación cuando se centró en y no en la carga de la página