setcustomvalidity - html5 requerido y jquery submit()

jquery submit form on button click

Question

Estoy intentando 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í está mi formulario, 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 envía a través de jquery, simplemente pasa el atributo requerido. 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 a jquery .submit () a usar el atributo html5 required.

Gracias de antemano por las respuestas

Answer 1

Aquí hay 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 2

En su lugar, podría llamar a una función y usar esa función para verificar si todos los nodos con el atributo requerido tienen un valor.

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

Answer 3

Hice lo siguiente

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

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

¡funciona!

Answer 4

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

necesitas escribir tu propio método personalizado en el envío. O hay un buen complemento que puedes usar que valida los campos según los atributos html5.

aquí está el enlace del complemento

Answer 5

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 fue agregar una línea de código para que después de que mi primer clic de este botón cambie su tipo para enviarlo de forma dinámica.

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

¡Lo cual funcionó como un encanto!

Answer 6

Usted puede

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

Answer 7

Demo de trabajo http://jsfiddle.net/3gFmC/

Espero que esto ayude :)

código

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

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

1.