css - example - title tag html

Validación en HTML5.:clasificación inválida después de enviar

Question

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

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

Answer 1

Muy simple solo usa #ID: invalid: focus

Esto solo hace la validación cuando se enfoca y no en la carga de la página

Answer 2

No, no hay nada fuera de la caja.

Mozilla tiene su propia pseudoclase para algo muy similar llamado '': -moz-ui-invalid''. Si desea lograr algo como esto, debe usar la validación de restricciones DOM-API:

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

También puede usar webshims lib polyfill , que no solo hará polifillings a los navegadores incapaces, sino que también agrega algo similar como -moz-ui-invalid a todos los navegadores (.form-ui-invalid).

Answer 3

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

En su CSS, a continuación, aplica un estilo a la input:not(.hide-hints):invalid . Esto significa que el estilo de error se mostrará para los usuarios sin JavaScript también.

Answer 4

Pregunta antigua, pero para la gente que podría resultarle útil: hice un pequeño script que agrega una clase a un formulario cuando se intenta enviar, de modo que pueda diseñar formularios que se han intentado y no se han intentado 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 los formularios que se intentan enviar obtendrán una clase _submit-attempted , por lo que solo puede dar una sombra de cuadro rojo a estos campos:

input {
    box-shadow: none;
}

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

Answer 5

Utilicé este enfoque para un proyecto mío, por lo que los campos no válidos se resaltarán solo después de enviar

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

para la validación ''requerida''

forma 1: establezca el atributo ''requerido'' para cada elemento en el formulario enviado

// 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 - usa el atributo ''datos''

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