Cómo forzar una validación de formulario html5 sin enviarla a través de jQuery

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

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

Para verificar si cierto campo es válido, use:

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

Para verificar si el formulario es válido, use:

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

Si desea mostrar los mensajes de error nativos que tienen algunos navegadores (como Chrome), desafortunadamente la única forma de hacerlo es enviando el formulario, de esta manera:

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Espero que esto ayude. Tenga en cuenta que la validación HTML5 no es compatible con todos los navegadores.

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

action="javascript:myFunction();"

Entonces 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

el siguiente código me funciona,

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

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

});

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

Enlace todos los formularios que realmente no desea enviar:

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

Ahora supongamos que tiene un <a>(dentro de <form>) que al hacer clic desea 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 realice la validación: la llamada a checkValidity() es suficiente (al menos en Chrome). Si otros pudieran agregar comentarios al probar esta teoría en otros navegadores, actualizaré esta respuesta.
• Lo que desencadena la validación no tiene que estar dentro del <form>. Esta era solo una forma limpia y flexible de tener una solución de uso general.

Puede llegar tarde a la fiesta, pero de alguna manera encontré esta pregunta al intentar resolver un problema similar. Como ningún código de esta página funcionó para mí, mientras tanto, encontré una solución que funciona según lo especificado.

El problema es cuando su <form>DOM contiene un solo <button>elemento, una vez disparado, que <button>automáticamente sumbitará la forma. Si juegas con AJAX, probablemente debas evitar la acción predeterminada. Pero hay un problema: si lo hace, también evitará la validación básica de HTML5. Por lo tanto, es una buena decisión evitar los valores predeterminados de ese botón solo si el formulario es válido. De lo contrario, la validación HTML5 lo protegerá de enviar. jQuerycheckValidity() 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 básica de HTML5 (con coincidencia de tipo y patrón) SIN enviar el formulario.

Usted habla de dos cosas diferentes: "validación HTML5" y validación de formulario HTML usando javascript / jquery.

HTML5 "tiene" opciones integradas para validar un formulario. Tal como usar el atributo "requerido" en un campo, que podría (basado en la implementación del navegador) fallar el envío del formulario sin usar javascript / jquery.

Con javascrip / jquery puedes hacer algo como esto

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

Para verificar todos los campos de formulario requeridos sin usar el botón Enviar, puede usar la siguiente función.

Debe asignar el atributo requerido a los controles.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

No necesita jQuery para lograr esto. En su formulario agregue:

onsubmit="return buttonSubmit(this)

o en JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

En su buttonSubmitfunción (o como se llame), puede enviar el formulario utilizando AJAX. buttonSubmitsolo se le llamará si su formulario está validado en HTML5.

En caso de que esto ayude a alguien, aquí está mi buttonSubmitfunción:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Algunos de mis formularios contienen varios botones de envío, de ahí esta línea if (submitvalue == e.elements[i].value). Establecí el valor de submitvalueusar un evento de clic.

Tuve una situación bastante compleja, donde necesitaba múltiples botones de envío para procesar diferentes cosas. Por ejemplo, Guardar y Eliminar.

La base era que también era discreto, por lo que no podía simplemente convertirlo en un botón normal. Pero también quería utilizar la validación html5.

Además, el evento de envío se anuló en caso de que el usuario presione enter para activar el envío predeterminado esperado; en este ejemplo guardar.

Estos son los esfuerzos del procesamiento del formulario para seguir funcionando con / sin javascript y con la validación html5, con eventos de envío y clic.

jsFiddle Demo: validación HTML5 con anulaciones de envío y clic

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

La advertencia sobre el uso de Javascript es que el onclick predeterminado del navegador debe propagarse al evento de envío DEBE ocurrir para mostrar los mensajes de error sin admitir cada navegador en su código. De lo contrario, si el evento de clic se anula con event.preventDefault () o devuelve falso, nunca se propagará al evento de envío del navegador.

Lo que hay que señalar es que en algunos navegadores no se activará el envío del formulario cuando el usuario presione Intro, sino que se activará el primer botón de envío del formulario. Por lo tanto, hay una consola.log ('envío de formulario') para mostrar que no se dispara.

Puede hacerlo sin enviar el formulario.

Por ejemplo, si el botón de envío de formulario con ID "buscar" está en el otro formulario. Puede llamar al evento de clic en ese botón de envío y llamar a ev.preventDefault después de eso. Para mi caso, valido el formulario B de la presentación del formulario A. Me gusta esto

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

Esta manera funciona bien para mí:

1. Agregue onSubmitatributo en su form, no olvide incluirlo returnen el valor.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. Define la función.

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

No es la mejor respuesta, pero funciona para mí.

Sé que esto ya ha sido respondido, pero tengo otra posible solución.

Si usa jquery, puede hacer esto.

Primero cree un par de extensiones en jquery para poder reutilizarlas según sea necesario.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Luego haga algo como esto donde quiera usarlo.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

Esto funcionó para mostrar los mensajes de error HTML 5 nativos con la validación del formulario.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Nota: RegForm es elform id .

Referencia

La esperanza ayuda a alguien.

Esta es una forma bastante directa de hacer que HTML5 realice la validación de cualquier formulario, al mismo tiempo que tiene un control JS moderno sobre el formulario. La única advertencia es que el botón Enviar debe estar dentro de <form>.

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

Creo que el mejor enfoque

utilizará jQuery Validation complemento de que utiliza las mejores prácticas para la validación de formularios y también tiene un buen soporte para el navegador. Por lo tanto, no debe preocuparse por los problemas de compatibilidad del navegador.

Y podemos usar la función de validación jQuery valid () que verifica si el formulario seleccionado es válido o si todos los elementos seleccionados son válidos sin enviar el formulario.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

De acuerdo con la pregunta, la validez de html5 debe poder validarse utilizando jQuery al principio y en la mayoría de las respuestas esto no está sucediendo y la razón de esto es la siguiente:

mientras se valida usando la función predeterminada del formulario html5

checkValidity();// returns true/false

debemos entender que jQuery devuelve una matriz de objetos, mientras seleccionamos así

$("#myForm")

por lo tanto, debe especificar el primer índice para que la función checkValidity () funcione

$('#myForm')[0].checkValidity()

Aquí está la solución completa:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}