web-dev-qa-db-fra.com

empêcher la soumission de formulaire (javascript)

J'ai un formulaire avec une entrée de texte: 

<form name="form1">
    <cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>

Je veux seulement le soumettre dans certains cas. (Je lance d'abord une vérification d'erreur)

<script>
function someFunc() {
    if (1==2) {
    document.form1.submit();
} else {
            alert("Not submitting");
    }
</script>

Le problème est le suivant: même si l'alerte se déclenche correctement, le formulaire est toujours soumis (il n'y a pas d'autre déclaration d'envoi à part celle-là!).

Merci beaucoup si quelqu'un peut nous éclairer à ce sujet. . . 

javascriptformssubmit
7
SlimJim

Cette approche présente un défaut fondamental. Vous indiquez actuellement au formulaire que, lorsque text1 change, appelez ensuite someFunc(). Si true, utilisez JavaScript pour soumettre le formulaire. Si faux, parlez de vos affaires. Si vous appuyez sur entrer dans l'entrée de texte, le formulaire est toujours soumis. Si un bouton de soumission est cliqué, le formulaire est toujours soumis.

La façon fondamentale d’aborder ceci est la suivante:

<form name="form1" onsubmit="return someFunc()">
    <input type="text" name="text1" id="text1">
</form>

Lorsque le de est soumis, appelez someFunc(). Cette fonction doit renvoyer true ou false. Si cela retourne vrai, le formulaire est soumis. Si faux, le formulaire ne fait rien.

Maintenant, votre JavaScript nécessite une légère modification:

<script>
function someFunc() {
    if (1==2) {
        return true;
    } else {
        alert("Not submitting");
        return false;
    }
}
</script>

Vous pouvez toujours faire appel à d'autres fonctions lorsqu'un champ est modifié, mais elles ne gèrent toujours pas la soumission finale du formulaire. En fait, someFunc() pourrait appeler les autres fonctions pour effectuer une dernière vérification avant de renvoyer true ou false à l'événement onsubmit.

EDIT:Documentation sur la soumission de formulaire implicite.

EDIT 2:

Ce code: 

$(document).ready(function(){ 
    $("#text1").on('change', function(event){ 
        event.preventDefault(); 
    }); 
});

arrête le traitement par défaut pour l'événement change associé à cet élément. Si vous souhaitez affecter l'événement submit, procédez comme suit:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        event.preventDefault(); 
    }); 
});

Ce qui vous permettrait de faire quelque chose comme ça:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( $('#text1').val() !== "foo" ) {
            alert("Error");
            event.preventDefault(); 
        }
    }); 
});
21
Adrian J. Moreno
 var form = document.getElementById("Your Form ID");

 form.addEventListener("submit", function (e) {
      if ("Your Desired Conditions.") {
          e.preventDefault();
      }
 });
2
samadadi

utilisez le code suivant cela fonctionnera parfaitement

<form onsubmit="return false;" >
0
gaurav