problème d'affichage erreur sur la page Web en utilisant js

Question

J'ai créé une page Web, dans lequel j'ai quelques boîte d'entrée et un bouton d'envoi dans un

<form action="" method="post" name="password"> 

Sur le clic du bouton d'envoi, il appelle un js fonction, qui vérifie si les mots de passe sont les mêmes, et sinon il affiche l'erreur

if (passwrd1!=passwrd2) 
{ 
document.getElementById("response").innerHTML="<font color='red'>Passwords do not match</font>"; 
} 

il affiche l'erreur:

<div id="response" align="center">Response from js</div> 

Mais le problème est, il affiche la fonction, puis la même "Réponse de js" revient.

Que dois-je faire pour résoudre ce problème?

Meilleur Zeeshan

Answer 1

-vous aussi return false de soumettre un clic de bouton fonction pour l'empêcher de poster effectivement renvoyer le formulaire? Parce que de la petite quantité de code que vous nous avez donné, il semble que votre formulaire soit renvoyé quand même.

Answer 2

Vous avez besoin d'un return false; dans votre instruction if, car le formulaire sera affiché même si l'instruction est atteinte. Le retour false arrêtera le formulaire et affichera le message.

Même si cela ne fait pas partie de la question, je vous recommande de ne pas utiliser l'élément <font>, car il est obsolète et n'est pas vraiment un bon moyen d'afficher du texte en rouge. Vous pouvez émettre le message d'erreur dans une période avec la couleur du texte mis au rouge comme ceci:

document.getElementById("response").innerHTML = "<span style=\"color: red;\">Message</span>"; 

pas beaucoup de différence, mais en suivant les standards du web est toujours une bonne chose.

Pour donner un exemple de ce qui a été dit dans les commentaires, il vaut probablement mieux définir une classe et la styliser avec CSS.

.errormsg { color: red; } 

document.getElementById("response").innerHTML = "<span class=\"errormsg\">Message</span>"; 

Le résultat est le même, mais comme indiqué dans les commentaires; c'est plus facile à entretenir, et donc une meilleure solution.