validacion - validar formulario javascript onclick

Activación de validación de formulario HTML5

Question

Tengo un formulario con varios conjuntos de campo diferentes. Tengo un Javascript que muestra los conjuntos de campos a los usuarios de a uno por vez. Para los navegadores compatibles con la validación HTML5, me gustaría utilizarlo. Sin embargo, tengo que hacerlo en mis términos. Estoy usando JQuery.

Cuando un usuario hace clic en un enlace JS para pasar al siguiente conjunto de campos, necesito que la validación se realice en el conjunto de campo actual y bloquear el avance del usuario si hay problemas.

Idealmente, a medida que el usuario pierda el foco en un elemento, la validación ocurrirá.

Actualmente no tiene validez para ir y usar Javascript. Preferiría usar el método nativo. :)

Answer 1

Algo fácil de hacer agrega o elimina la validación HTML5 a conjuntos de campo.

 $(''form'').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find(''.required'').attr(''required'', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I''M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find(''fieldset.current .required'').attr(''required'', true);

    $(this).submit(function(){

        var current     = $(this).find(''fieldset.current'')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass(''current'');
        $(next).addClass(''current'');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find(''.required'').attr(''required'', true);

    });

});

Answer 2

Cuando hay un proceso de validación muy complejo (especialmente asincrónico), hay una solución alternativa:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms[''form1'']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === ''Ok'') {
         form1.submit()
    } else {
         alert(''form is invalid'')
    }
}
</script>

Answer 3

De hecho, es posible activar la validación manualmente. (La pregunta es muy antigua, pero aparece sobre Google, el caso de uso sigue siendo válido y todavía no hay una buena respuesta).

Usaré JavaScript simple en mi respuesta para mejorar la reutilización, no se necesita jQuery.

Asuma el siguiente formulario HTML:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

Y agarremos nuestros elementos de IU en JavaScript:

var form = document.querySelector(''form'')
var triggerButton = document.querySelector(''button'')

¿Entonces que haremos?

1. Compruebe la validez del formulario llamando a form.checkValidity() . Esto nos dirá si el formulario es válido, pero no mostrará la UI de validación.
2. Si el formulario no es válido, creamos un botón de envío temporal y activamos un clic. Dado que el formulario no es válido, sabemos que en realidad no se enviará, sin embargo, mostrará sugerencias de validación para el usuario. Eliminaremos el botón de envío temporal de inmediato, para que nunca sea visible para el usuario.
3. Si el formulario es válido, no necesitamos interferir en absoluto y dejar que el usuario proceda.

En codigo:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    const tmpSubmit = document.createElement(''button'')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

Este código funcionará en prácticamente cualquier navegador común (lo he probado con éxito hasta IE11).

Aquí hay un ejemplo de CodePen en funcionamiento.

Supongo que el problema del OP ya no existe después de tantos años, pero para todos los que tienen el mismo caso de uso (formulario de varias páginas): asegúrese de deshabilitar de algún modo los elementos en las partes ocultas del formulario ya que resultará en la validación de campos invisibles en un error de navegador

Answer 4

En cierta medida, PUEDE trigger validación de formulario HTML5 y mostrar sugerencias al usuario sin enviar el formulario.

Dos botones, uno para validar, uno para enviar

Establezca un oyente onclick en el botón de validación para establecer un indicador global (digamos justValidate ) para indicar que este clic tiene la intención de verificar la validación del formulario.

Y configure un oyente onclick en el botón de enviar para establecer el indicador justValidate en falso.

Luego, en el controlador onsubmit del formulario, marque la bandera justValidate para decidir el valor devuelto e invoque preventDefault() para detener el formulario para enviar. Como sabe, la validación de formularios HTML5 (y la sugerencia GUI para el usuario) se realiza antes del evento onsubmit e, incluso si el formulario es VÁLIDO, puede detener el envío del formulario devolviendo false o invocar preventDefault() .

Y, en HTML5, tiene un método para verificar la validación del formulario: form.checkValidity() , luego puede saber si el formulario es válido o no en su código.

OK, aquí está la demostración: http://jsbin.com/buvuku/2/edit

Answer 5

Me parece encontrar el truco: simplemente elimine la etiqueta de "destino" del formulario, luego use un botón de enviar para validar el formulario y mostrar sugerencias, verificar si el formulario es válido a través de JavaScript, y luego publicar lo que sea. El siguiente código funciona para mí:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$(''#submit'').click( function(e){
  var isValid = true;
  $(''form input'').map(function() {
    isValid &= this.validity[''valid''] ;
  }) ;
  if (isValid) {
    console.log(''valid!'');
    // post something..
  } else
    console.log(''not valid!'');
});
</script>

Answer 6

No estoy seguro de que valga la pena escribir todo esto desde cero, ya que este artículo publicado en A List Apart hace un buen trabajo al explicarlo. MDN también tiene una guía práctica para formularios HTML5 y validación (que cubre la API y también el CSS relacionado).

Answer 7

No puede activar la IU de validación nativa, pero puede aprovechar fácilmente la API de validación en elementos de entrada arbitrarios:

$(''input'').blur(function(event) {
    event.target.checkValidity();
}).bind(''invalid'', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

El primer evento dispara checkValidity en cada elemento de entrada en cuanto pierde el foco, si el elemento invalid es invalid , el evento correspondiente se disparará y quedará atrapado por el segundo controlador de eventos. Éste vuelve a centrar el foco en el elemento, pero eso podría ser bastante molesto, supongo que tienes una mejor solución para notificar sobre los errores. Aquí hay un ejemplo de trabajo de mi código anterior .

Answer 8

Otra forma de resolver este problema:

$(''input'').oninvalid(function (event, errorMessage) {
    event.target.focus();
});