Code JavaScript pour arrêter la soumission du formulaire

Question

Une façon d'empêcher la soumission du formulaire est de renvoyer false de votre fonction JavaScript.

Lorsque le bouton "submit" est cliqué, une fonction de validation est appelée. J'ai une condition dans la validation du formulaire. Si cette condition est remplie, j'appelle une fonction nommée returnToPreviousPage() ;

function returnToPreviousPage() {
    window.history.back();
}

J'utilise JavaScript et Boîte à outils Dojo .

Au lieu de revenir à la page précédente, il soumet le formulaire. Comment puis-je interrompre cette soumission et revenir à la page précédente ?

Answer 1

Vous pouvez utiliser la valeur de retour de la fonction pour empêcher la soumission du formulaire.

<form name="myForm" onsubmit="return validateMyForm();"> 

et fonctionnent comme

<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 cas de Chrome 27.0.1453.116 m si le code ci-dessus ne fonctionne pas, veuillez Définir la valeur de retour du paramètre du gestionnaire d'événement. à false pour que cela fonctionne.

Merci Sam pour le partage de l'information.

EDIT :

Merci à Vikram pour sa solution de contournement si validateMyForm() renvoie false :

 <form onsubmit="event.preventDefault(); validateMyForm();">

où validateMyForm() est une fonction qui renvoie faux si la validation échoue. Le point clé est d'utiliser le nom event. Nous ne pouvons pas utiliser par exemple e.preventDefault()

Answer 2

Empêcher la défaillance

Boîte à outils Dojo

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();
    });
}

Answer 3

Ce qui suit fonctionne pour l'instant (testé dans Chrome et Firefox) :

<form onsubmit="event.preventDefault(); validateMyForm();">

Où validateMyForm() est une fonction qui retourne false si la validation échoue. Le point essentiel est d'utiliser le nom event . Nous ne pouvons pas utiliser par exemple e.preventDefault() .

Answer 4

En se basant sur la réponse de @Vikram Pudi, nous pouvons également faire ceci avec du Javascript pur.

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();

    }
</script>

Answer 5

Il suffit d'utiliser un simple button au lieu d'un bouton d'envoi. Et appelez une fonction JavaScript pour gérer l'envoi du formulaire :

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Fonction au sein d'un script étiquette :

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Vous pouvez également essayer window.history.forward(-1);