Rees
Tengo un formulario HTML simple que quiero aprovechar para la validación de campos requeridos. Mi problema es que quiero usar la validación de formulario HTML5 PERO al mismo tiempo evitar enviar el formulario porque quiero ejecutar una llamada jQuery Ajax en su lugar. Sé que puede deshabilitar la validación de html5, pero quiero mantener esto como mi método principal de validación de formularios en lugar de un complemento de jQuery.
¿Alguna idea?
HTML
<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
<input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
<input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
<p>
<input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
</p>
</form>
JavaScript:
$(function(){
$("#submitbtn").click(function(){
$.ajax({
url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
success:
function(txt){
if(txt){
$("#thankyou").slideDown("slow");
}
}
});
});
});
milimétrico
De acuerdo con esto: ¿Hay algún navegador que admita el método checkValidity() de HTML5?, y esta puede no ser la última verdad ya que HTML5 es un trabajo en progreso, el Form.checkValidity() y element.validity.valid debería permitirle acceder a la información de validación de JavaScript. Suponiendo que eso sea cierto, su jQuery deberá adjuntarse al envío del formulario y hacer uso de eso:
$('#membershipform').submit(function(event){
// cancels the form submission
event.preventDefault();
// do whatever you want here
});
-
Para todos los lectores: ASEGÚRESE de incluir el parámetro de evento en la función, de lo contrario, NO funcionará en Firefox.
–Marcel Gruber
26/03/2015 a las 21:42
-
@Max, ¿quieres asegurarte de pasar el
eventparámetro a la función de devolución de llamada? Si es así, sí, ciertamente se requiere en todos los navegadores, ya que no podría llamarpreventDefaultde lo contrario.– milimétrico
26 de marzo de 2015 a las 22:05
-
Sí. Solo como un recordatorio. Perdí bastante tiempo tratando de averiguar por qué no funcionaba después de usar el
event.preventDefault();y no el resto del ejemplo. Incluso sin eleventparámetro, todavía parecía comportarse como se desea en Chrome, pero no en Firefox.–Marcel Gruber
26 de marzo de 2015 a las 22:14
-
@Max: lo que podría tener allí es que Chrome tiene automáticamente un comportamiento de validación automática que también impide el envío del formulario. Entonces este código no sería necesario en absoluto, pero
event.preventDefault()arrojaría un error en la consola si la estuviera usando sineventsiendo definido. Así que asegúrese de mantener esa consola abierta. ¡Mantente a salvo ahí fuera! 🙂– milimétrico
27 de marzo de 2015 a las 12:11
Puede usar la validación de formulario html5 desde javascript, solo llame al método reportValidez()
En tu ejemplo:
<script>
document.querySelector('#membershipform').reportValidity()
</script>
reportValidity ejecuta la validación del formulario html5 y devuelve verdadero/falso.
Usar:
$('#membershipform').submit(function(){
// do whatever you want here
return false;
});
-
Esto no funcionará si el código sobre la declaración de devolución arroja un error. En caso de error, el formulario sigue yendo a la dirección especificada en el atributo “acción”.
– Stan
11 de enero de 2013 a las 0:28
-
¡Sí! esto funciona si quiero que mi formulario pase por la parte de validación pero no se envíe. buen trabajo
– Sando K.
09/01/2016 a las 18:00
Este es un aprovechamiento sutil del comportamiento predeterminado y javascript para crear lo que desea.
var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
console.log("valid");
e.preventDefault();
}else{
console.log("not valid");
return;
}
Si el formulario es válido, entonces preventDefault() y continúe con su función (por ejemplo, envíe a través de ajax). Si no es válido, regrese sin evitar el valor predeterminado, debe encontrar que las acciones predeterminadas para la validación del formulario ocurren en las entradas de su formulario.
Chirag
Usando script java puro
<script>
document.getElementById('membershipform')
.addEventListener("submit",
function(event) {
event.preventDefault();
// write stuff
});
</script>