plugin - Validación HTML5 cuando el tipo de entrada no es "enviar"

plantillas contact form 7

Question

Estoy usando HTML5 para validar campos. Estoy enviando el formulario usando JavaScript con un clic de botón. Pero la validación de HTML5 no funciona. Funciona solo cuando se ingresa el tipo de entrada. ¿Podemos hacer algo más que usar la validación de JavaScript o cambiar el tipo para submit ?

Este es el código HTML:

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

Estoy enviando el formulario en la función submitform() .

Answer 1

Debería usar la etiqueta de formulario adjuntando sus entradas. Y tipo de entrada enviar.
Esto funciona.

<form id="testform">
<input type="text" id="example" name="example"  required>
<button type="submit"  onclick="submitform()" id="save">Save</button>
</form>

Como la validación de HTML5 funciona solo con el botón de enviar, debe mantenerla allí. Sin embargo, puede evitar el envío del formulario cuando sea válido al evitar la acción predeterminada al escribir el controlador de eventos para el formulario.

document.getElementById(''testform'').onsubmit= function(e){
     e.preventDefault();
}

Esto dará su validación cuando no sea válida y no enviará el formulario cuando sea válido.

Answer 2

El proceso de validación de formularios HTML5 está limitado a situaciones en las que el formulario se envía mediante un botón de envío. El algoritmo de envío de formularios dice explícitamente que la validación no se realiza cuando el formulario se envía mediante el método submit() . Aparentemente, la idea es que si envía un formulario a través de JavaScript, se supone que debe hacer la validación.

Sin embargo, puede solicitar la validación de formularios (estáticos) con las restricciones definidas por los atributos HTML5, utilizando el método checkValidity() . Si desea mostrar los mismos mensajes de error que el navegador en la validación de formularios HTML5, me temo que debería verificar todos los campos restringidos, ya que la propiedad validityMessage es una propiedad de los campos (controles), no la forma . En el caso de un solo campo restringido, como en el caso presentado, esto es trivial por supuesto:

function submitform() {
  var f = document.getElementsByTagName(''form'')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById(''example'').validationMessage);
  }
}

Answer 3

O puede cambiar el tipo de botón para submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

O puede ocultar el botón Enviar, mantener otro botón con tipo = "botón" y hacer clic en evento para ese botón

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

Answer 4

Probar esto:

<script type="text/javascript">
    function test
    {
        alert("hello world");  //write your logic here like ajax
    }
</script>

<form action="javascript:test();" >
    firstName : <input type="text" name="firstName" id="firstName" required/><br/>
    lastName : <input type="text" name="lastName" id="lastName" required/><br/>
    email : <input type="email" name="email" id="email"/><br/>
    <input type="submit" value="Get It!" name="submit" id="submit"/>
</form>

Answer 5

Pruebe con <button type="submit"> puede realizar la funcionalidad de submitform() haciendo <form ....... onsubmit="submitform()">

Answer 6

Puede que llegue tarde, pero la forma en que lo hice fue crear una entrada de envío oculto y llamar a su administrador de clics al momento de enviar. Algo así como (usando jquery por simplicidad):

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">

<script>
function submitform() {
    $(''#submit_handle'').click();
}
</script>

Answer 7

Quería agregar una nueva forma de hacer esto con la que me encontré recientemente. Aunque la validación del formulario no se ejecuta cuando envía el formulario mediante el método submit() , no hay nada que le impida hacer clic en un botón de enviar mediante programación. Incluso si está escondido

Tener una forma:

<form>
    <input type="text" name="title" required />
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button>
    <button type="button" onclick="doFancyStuff()">Submit</button>
</form>

Esto activará la validación del formulario:

function doFancyStuff() {
    $("#submit-button").click();
}

O sin jQuery

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

En mi caso, hago un montón de validación y cálculos cuando se presiona el botón de envío falso, si mi validación manual falla, entonces sé que puedo hacer clic en el botón de enviar oculto y mostrar la validación del formulario.

Aquí hay un jsfiddle MUY simple que muestra el concepto:

https://jsfiddle.net/45vxjz87/1/

Answer 8

Solo trabajo de validación HTML5 cuando se envíe el tipo de botón

cambio --

<button type="button"  onclick="submitform()" id="save">Save</button>

A --

<button type="submit"  onclick="submitform()" id="save">Save</button>