Cómo forzar la validación de un formulario HTML sin enviarlo a través de jQuery

Tengo este formulario en mi aplicación y lo enviaré a través de AJAX, pero quiero usar HTML para la validación del lado del cliente. Entonces quiero poder forzar la validación del formulario, quizás a través de jQuery.

Quiero activar la validación sin enviar el formulario. ¿Es posible?

Para comprobar si un determinado campo es válido, utilice:

$('#myField')[0].checkValidity(); // returns true|false

Para comprobar si el formulario es válido, utilice:

$('#myForm')[0].checkValidity(); // returns true|false

Mostrar error integrado de html5

if (! $('#myForm')[0].checkValidity()) {
      $('#myForm')[0].reportValidity()
}

Tenga en cuenta que, hasta ahora, la validación de HTML5 no es compatible con todos los navegadores.

el siguiente código funciona para mí,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

Encontré esta solución para trabajar para mí. Simplemente llame a una función de javascript como esta:

action="javascript:myFunction();"

Luego tienes la validación html5… realmente simple 🙂

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

de: validación de formulario html5

Solución JS vainilla 2022

Pure JavaScript tiene todas las funciones que necesita para esto. Sé que la pregunta era sobre jQuery, pero incluso las respuestas con jQuery usan estas funciones, que son checkValidity() y reportValidity().

Probar todo el formulario

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

Probar campo específico

checkValidity() y reportValidity() no solo se puede usar en el formulario, sino también en campos específicos. No es necesario crear un formulario o un botón de envío ficticio si no es necesario.

// Get field of interest
let inputElement = document.querySelector("[name="" + inputName + ""]");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

Esto tiene que estar en una función llamada por un detector de eventos para que tenga sentido, obviamente.

Aquí hay una forma más general que es un poco más limpia:

Cree su formulario de esta manera (puede ser un formulario ficticio que no hace nada):

<form class="validateDontSubmit">
...

Enlaza todos los formularios que realmente no quieras enviar:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Ahora digamos que tienes un <a> (dentro de <form>) que al hacer clic quiere validar el formulario:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Algunas notas aquí:

• Me di cuenta de que no es necesario que envíe el formulario para que se produzca la validación: la llamada a checkValidity() es suficiente (al menos en cromo). Si otros pudieran agregar comentarios probando esta teoría en otros navegadores, actualizaré esta respuesta.
• Lo que desencadena la validación no tiene que estar dentro del <form>. Esta fue solo una forma limpia y flexible de tener una solución de uso general.

Puede que llegue tarde a la fiesta, pero de alguna manera encontré esta pregunta mientras intentaba resolver un problema similar. Como ningún código de esta página funcionó para mí, mientras tanto, encontré una solución que funciona como se especifica.

El problema es cuando tu <form> DOM contiene solo <button> elemento, una vez disparado, que <button> enviará automáticamente el formulario. Si juegas con AJAX, probablemente necesites evitar la acción predeterminada. Pero hay una trampa: si solo lo hace, también evitará la validación básica de HTML5. Por lo tanto, es una buena idea evitar valores predeterminados en ese botón solo si el formulario es válido. De lo contrario, la validación de HTML5 lo protegerá de enviar. jQuery checkValidity() ayudará con esto:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

El código descrito anteriormente le permitirá utilizar la validación HTML5 básica (con coincidencia de tipo y patrón) SIN enviar el formulario.