html5 requerido y jquery submit()

Question

Estoy tratando de implementar html5 en un formulario, pero tuve un problema cuando envié el formulario a través de jquery y trato de usar el atributo "required" html5.

Aquí es mi forma, bastante simple:

<form action="index.php" id="loginform"> 
     <input name="username" required placeholder="username" type="text">  
     <a href="javascript:$('#loginform').submit();">Login</a> 
</form> 

El problema es que cuando el formulario se submited través de jQuery, Es simplemente haciendo pasar el atributo necesario. Sé que lo requerido solo debería funcionar si el formulario es enviado por el usuario, no por un script, así que cuando cambio el anclaje a una entrada de envío, funciona perfecto.

Mi punto es si hay una manera de forzar al jquery .submit() a usar el atributo html5 required.

Gracias de antemano por las respuestas

Answer 1

hice lo siguiente

<form> 
    ... 
    <button type="submit" class="hide"></button> 
</form> 

<script> 
    ... 
    $(...).find('[type="submit"]').trigger('click'); 
    ... 
</script> 

¡funciona!

Answer 2

que se podría llamar una función en su lugar y utilizar esa función para comprobar si todos los nodos con el atributo requerido tienen un valor.

Hay algunos plugins disponibles para hacer esto: http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

Answer 3

demostración de trabajohttp://jsfiddle.net/3gFmC/

la esperanza que esto ayudará :)

código

$('#btn_submit').bind('click', function() { 

     $('input:text[required]').parent().show(); 
     // do whatever; 
}); 

Answer 4

Tienes razón. La validación de HTML5 solo funciona cuando el usuario activa el envío. así es como es. :(

necesita escribir su propio método personalizado en enviar. O no es un buen complemento puede utilizar lo que valida los campos según los atributos de HTML5.

Answer 5

Puede

• desencadenar click evento en un envío
• verificar la validación manualmente con $("form")[0].checkValidity()
• encontrar elementos válidos de forma manual utilizando $("form :invalid")

Answer 6

Éstos son algunos ejemplos, cómo validar HTML5:

function validateForm(form) { 
    if (form.username.value=='') { 
    alert('Username missing'); 
    return false; 
    } 
    return true; 
} 

<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();"> 
    <input name="username" placeholder="username" required="required" type="text" /> 
    <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a> 
    <a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a> 
    <input name="send" type="submit" value="Login3" /> 
    <input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" /> 
</form> 

código completo here. Una cosa aquí es extraña: $ (document.forms.loginform) .submit(); funciona bien, pero document.forms.loginform.submit(); falla ¿Alguien puede explicar por qué?

Answer 7

Tuve exactamente el mismo problema. Tenía un botón único que deliberadamente había establecido NO ser un envío porque estaba en el primer clic que revela un formulario. En un segundo clic del mismo botón $ ('form [name = xxx]') submit(); estaba disparando y descubrí que la validación de HTML5 no funciona.

Mi truco era agregar una línea de código para que después de que mi primer clic de este botón ocurra cambie su tipo para enviar dinámicamente.

$("#btn").attr("type","submit"); 

¡Qué funcionó como un amuleto!