Estoy escribiendo formulario y agregando atributos de validación html5 a su entrada como "requerido", "enfoque automático". Uso JavaScript para enviar el formulario utilizando document.myForm.submit() pero no valida el formulario con los atributos de validación html5 ya que no están allí.Presentar formulario HTML5 utilizando Javascript y validar sus entradas
¿Alguna sugerencia?
Parece que activar click en el botón de enviar tiene el efecto correcto: http://jsfiddle.net/e6Hf7/.
document.myForm.submitButton.click();
y en caso de que no tiene un botón de envío, añada una invisible como:
<input type="submit" style="display:none" name="submitButton">
Por qué no simplemente llamar a la validación de forma manual antes de hacer document.myForm.submit)
¿Qué marco Cómo se utiliza la validación y qué biblioteca (AJAX?
En caso de usar jQuery aquí es el código para prevenir el presentar:
$('#myForm').submit(function(evt) {
if (! $('#myForm').validate()) {
evt.preventDefault();
}
});
y desencadenar el presente a través de:
$('#myForm').submit();
Esto requeriría la validación cada vez que se activa presentar .. Y si la validación falla, impide que la presentación se ejecute. Pero me vería en su validationframework ya que por lo general debe hacer esto ya
En caso de que no utiliza ningún marco de JavaScript es posible que desee echar un vistazo a: element.checkValidity(); y cómo llamar a la validación HTML5 de JavaScript antes incluso llamando submit.
El "framework" es HTML5 simple y quiere invocar su funcionalidad de validación incorporada. – Xion
Gracias .. No sabía que la validación ya estaba implementada en los navegadores .. Actualicé la respuesta con un puntero a MDN – Tigraine
Sí, como dijo Xion Es sencillo HTML5 ¿Alguien sabe cómo puedo usar su funcionalidad de validación integrada? ? –
La respuesta del pimvdb se basa en una solución que incluya un botón oculto enviar.
HTML5 proporciona funciones de JavaScript para lograr lo mismo sin un botón de envío. Como Tigraine señaló, Mozilla documentos dos métodos de comprobación de validez para los elementos de la 'forma':
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>
</body>
</html>
¡No funciona! –
@Ammed Elmorsy: lo hago por mí en Chrome. ¿El violín te falla? – pimvdb
También estoy trabajando en Chrome. la propiedad submitButton no está definida –