validacion - validar formulario javascript html5
Código de JavaScript para detener el envío del formulario (11)
Una forma de detener el envío de formularios es devolver falso de su función de JavaScript.
Cuando se hace clic en el botón Enviar, se llama a una función de validación. Tengo un caso en la validación de formulario. Si se cumple esa condición, invoco una función llamada returnToPreviousPage ();
function returnToPreviousPage() {
window.history.back();
}
Estoy usando JavaScript y Dojo Toolkit .
En lugar de volver a la página anterior, envía el formulario. ¿Cómo puedo cancelar esta presentación y volver a la página anterior?
Digamos que tienes un formulario similar a este
<form action="membersDeleteAllData.html" method="post">
<button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>
Aquí está el javascript para la función confirmAction
<script type="text/javascript">
function confirmAction(e)
{
var confirmation = confirm("Are you sure about this ?") ;
if (!confirmation)
{
e.preventDefault() ;
returnToPreviousPage();
}
return confirmation ;
}
</script>
Este funciona en Firefox, Chrome, Internet Explorer (edge), Safari, etc.
Si ese no es el caso, hágamelo saber
Las respuestas de Hemant y Vikram no funcionaron completamente para mí en Chrome. El evento.preventDefault (); La secuencia de comandos impidió que la página se enviara, independientemente de si se aprueba o no la validación. En cambio, tuve que mover el evento.preventDefault (); en la declaración if de la siguiente manera:
if(check if your conditions are not satisfying)
{
event.preventDefault();
alert("validation failed false");
returnToPreviousPage();
return false;
}
alert("validations passed");
return true;
}
Gracias a Hemant y Vikram por ponerme en el camino correcto.
Los siguientes trabajos funcionan a partir de ahora (probados en Chrome y Firefox):
<form onsubmit="event.preventDefault(); validateMyForm();">
Donde validateMyForm () es una función que devuelve false si falla la validación. El punto clave es usar el event nombre. No podemos usar, por ejemplo, e.preventDefault() .
Muchas formas difíciles de hacer algo fácil:
<form name="foo" onsubmit="return false">
Por ejemplo, si tiene el botón de enviar en el formulario, para detener su propagación simplemente escriba event.preventDefault (); en la función a la que se accede al hacer clic en el botón Enviar o en el botón Entrar.
Puede usar el valor de retorno de la función para evitar el envío del formulario
<form name="myForm" onsubmit="return validateMyForm();">
y funciona como
<script type="text/javascript">
function validateMyForm()
{
if(check if your conditions are not satisfying)
{
alert("validation failed false");
returnToPreviousPage();
return false;
}
alert("validations passed");
return true;
}
</script>
En el caso de Chrome 27.0.1453.116 m si el código anterior no funciona, configure el campo returnValue del parámetro del controlador de eventos en false para que funcione.
Gracias Sam por compartir información.
EDITAR:
Gracias a Vikram por su solución alternativa si validateMyForm () devuelve falso:
<form onsubmit="event.preventDefault(); validateMyForm();">
donde validateMyForm () es una función que devuelve false si falla la validación. El punto clave es usar el evento del nombre. No podemos usar para egepreventDefault ()
Simplemente hazlo ...
<form>
<!-- Your Input Elements -->
</form>
y aquí va tu JQuery
$(document).on(''submit'', ''form'', function(e){
e.preventDefault();
//your code goes here
//100% works
});
Simplemente use un button simple en lugar de un botón de enviar. Y llame a una función de JavaScript para gestionar el envío de formularios:
<input type="button" name="submit" value="submit" onclick="submit_form();"/>
Función dentro de una etiqueta de script :
function submit_form() {
if (conditions) {
document.forms[''myform''].submit();
}
else {
returnToPreviousPage();
}
}
También puedes probar window.history.forward(-1);
Todas tus respuestas dieron algo para trabajar.
FINALMENTE, esto funcionó para mí: (si no elige al menos un elemento de casilla de verificación, advierte y permanece en la misma página)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="helloForm" action="HelloWorld" method="GET" onsubmit="valthisform();">
<br>
<br><b> MY LIKES </b>
<br>
First Name: <input type="text" name="first_name" required>
<br />
Last Name: <input type="text" name="last_name" required />
<br>
<input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
<input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
<input type="radio" name="modifyValues" value="asis" required="required" checked="checked">Do not convert <br>
<br>
<input type="checkbox" name="c1" value="maths" /> Maths
<input type="checkbox" name="c1" value="physics" /> Physics
<input type="checkbox" name="c1" value="chemistry" /> Chemistry
<br>
<button onclick="submit">Submit</button>
<!-- input type="submit" value="submit" / -->
<script>
<!---
function valthisform() {
var checkboxs=document.getElementsByName("c1");
var okay=false;
for(var i=0,l=checkboxs.length;i<l;i++) {
if(checkboxs[i].checked) {
okay=true;
break;
}
}
if (!okay) {
alert("Please check a checkbox");
event.preventDefault();
} else {
}
}
-->
</script>
</form>
</body>
</html>
Use prevenir predeterminado
Dojo Toolkit
dojo.connect(form, "onsubmit", function(evt) {
evt.preventDefault();
window.history.back();
});
jQuery
$(''#form'').submit(function (evt) {
evt.preventDefault();
window.history.back();
});
Vanilla JavaScript
if (element.addEventListener) {
element.addEventListener("submit", function(evt) {
evt.preventDefault();
window.history.back();
}, true);
}
else {
element.attachEvent(''onsubmit'', function(evt){
evt.preventDefault();
window.history.back();
});
}
solo use el siguiente código, funcionará bien
<form onsubmit="return false;" >