Maison >interface Web >js tutoriel >Comment puis-je arrêter de manière fiable la soumission d'un formulaire JavaScript et revenir en arrière ?

Comment puis-je arrêter de manière fiable la soumission d'un formulaire JavaScript et revenir en arrière ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-23 12:50:22960parcourir

How Can I Reliably Stop JavaScript Form Submission and Navigate Back?

Arrêter la soumission du formulaire avec JavaScript

La soumission du formulaire peut être empêchée en JavaScript en utilisant diverses méthodes. Une méthode mentionnée dans la question consiste à renvoyer false de la fonction de validation lorsque des conditions spécifiques sont remplies. Cependant, dans ce cas, le formulaire est soumis même après avoir appelé la fonction returnToPreviousPage().

Pour arrêter efficacement la soumission du formulaire et revenir à la page précédente, envisagez les approches suivantes :

1. PreventDefault() et Return False :

Ajoutez la méthode PreventDefault() au gestionnaire d'événements onsubmit du formulaire et renvoyez false à partir de la fonction de validation. Cela empêchera le navigateur de soumettre le formulaire et déclenchera la fonction returnToPreviousPage() pour revenir à la page précédente :

<form onsubmit="event.preventDefault(); validateMyForm();">
function validateMyForm() {
  if (condition not met) {
    alert("Validation failed");
    returnToPreviousPage();
    return false;
  } else {
    alert("Validation passed");
    return true;
  }
}

2. Valeur de retour de la fonction :

Utilisez la valeur de retour de la fonction de validation pour contrôler la soumission du formulaire. Dans le gestionnaire d'événements onsubmit, spécifiez le nom de la fonction de validation et définissez la valeur de retour de la fonction pour arrêter ou autoriser la soumission :

<form onsubmit="return validateMyForm();">
function validateMyForm() {
  if (condition not met) {
    alert("Validation failed");
    returnToPreviousPage();
    return false;
  } else {
    alert("Validation passed");
    return true;
  }
}

Remarque : Si vous utilisez Chrome 27.0.1453.116 m, il peut être nécessaire de définir le champ returnValue du paramètre event sur false pour que le code ci-dessus fonctionne efficacement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn