Appel de la fonction javascript sur soumettre le formulaire

Je suis en train d'appeler la fonction JavaScript lors de la soumission du formulaire.

Voici le code, mais tout en soumettant la fonction n'est pas appelée, s'il vous plaît suggérer quelque chose et je veux afficher les messages d'erreur à l'aide de javascript méthode , comment puis-je afficher des messages d'erreur en validation à l'aide de JavaScript.

<form id="register" name="register"  onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
},
"email": {
required: true,
}
}
});
});
</script>

et voici le code JavaScript

function validateForm()
{
var password = document.forms["register"]["Password"].value;
var con-password = document.forms["register"]["Confirm-Password"].value;
if(password != con-password)
{
document.getElementById('password-error').style.visibility='visible';
alert("not matched");
}
alert("matched");
}

onsubmit="validateForm()" remplacer par onsubmit="return validateForm()". essayez ceci
j'ai déjà essayé de ne pas travailler.
quelqu'un peut s'il vous plaît partager code de travail comme sur jsfiddle

InformationsquelleAutor chandan111 | 2014-01-21

5

Ceci est probablement dû à une erreur de syntaxe dans le script. Quand vous voyez des erreurs comme ça, regarde dans la console JavaScript de votre navigateur.

Dans ce cas, con-password n'est pas un nom de variable valide. Ce JavaScript voit est:
```
var con - password ...
```
c'est à dire le code dit "soustraire password de con". Essayez un trait de soulignement à la place:
```
var con_password ...
```
- grâce learan une chose nouvelle ,mais encore ajouté fuction n'a pas fonctionné.
- Et que voyez-vous dans la console d'erreur?
- événement returnValue est obsolète. Veuillez utiliser le standard de l'événement.preventDefault() à la place.
- -1 pour ne pas également à montrer l'OP que son validateForm() fonction est complètement inutile, et que le jQuery Valider plugin a un submitHandler construit en elle.
InformationsquelleAutor Aaron Digulla

N'avez pas besoin de faire grand chose de plus pour le mot de passe correspondant, il suffit d'ajouter equalTo: "#Password", comme illustré dans l'exemple ci-dessous:

$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm-Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) { 
//Your function call  
return false; //return true will submit form
}
});
});

De travail exemple:

<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm_Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm_Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) { 
//Your function call  
return false; //return true will submit form
}
});
});
</script>

merci, ça marche pour moi, mais je veux utiliser du javascript .
autant que je sache, jQuery JS 😉
Vous pouvez utiliser submitHandler: function(formulaire) { /*ton appel de fonction*/ return false; }
au-dessus de truc travailler pour moi, mais il affiche les messages d'erreur à la fois la condition lorsque les mots de passe sont différents et même .
Pas possible, vous faites quelque chose de mal. consultez la documentation jqueryvalidation.org/validate. Noter le changement de trait d'union(-) pour le trait de soulignement(_) dans le nom de champ de saisie!
oui cela peut être la raison . merci 🙂
+1 pour l'affichage de la bonne réponse et je suis d'accord, les OP du code pourrait être tellement mieux si il avait simplement exploiter les fonctionnalités du plugin. Cependant, il est possible d'afficher les messages sur le succès avec jQuery Valider plugin... on a seulement besoin de lire la documentation et de regarder la code sur Stack Overflow.

InformationsquelleAutor Anubhav

Peut-être au lieu de vérifier si les mots de passe correspond vous pouvez ajouter une nouvelle règle de validation?
quelque chose comme:

           ... "Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"} ....

et pour les messages d'ajouter:

... messages: {
"Password": "Your message",
}...

et dans l'ensemble quelque chose comme ceci:"

$(document).ready(function () {
$("Your form name").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
email: true
}
}
messages: {
"Password": "Your message",
"email": "Your Message",
},
submitHandler: function (form) {
form.submit();
}
});
});`

merci pouvez vous s'il vous plaît écrire des messages de la partie de Mot de passe et Courriel de confirmation de la syntaxe.
ajouté quelques-unes. Mais pourrait-il y mes quelques fautes d'orthographe. Ne pas avoir la possibilité, en ce moment, pour vérifier cela.

InformationsquelleAutor szpic

de l'essayer. - je ajouter de l'événement onclick sur le bouton "soumettre" pour appeler la fonction validateForm()

html

<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>
</form>

c'est le validateForm()

<script type="text/javascript">
function validateForm() {
var username = $('#Username'),
password = $('#Password'),
confirm  = $('#Confirm-Password'),
email    = $('#email');
$('#register').submit(function(ev){
//check if all fields is not empty
if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
ev.preventDefault(); //prevent form submit
alert('All fields are required.'); //alert message
//check if password and confirm password is equal
} else if(password.val() != confirm.val()){
ev.preventDefault(); //prevent form submit
alert('password did not match.'); //alert message
} else {
return true; //submit form if validation has passed.
}
});
}
</script>

InformationsquelleAutor Peace

-1

Peut-être avez vous manqué - vous besoin d'utiliser method="post" dans

http://jsfiddle.net/dLbLS/

    <form id="register" name="register"  method="post" onsubmit="validateForm();" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password"  placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>
</form>

InformationsquelleAutor Spdexter

-2

Utiliser ce code
```
    <input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">
```
faire une chose dont je suis l'envoi d'un lien s'il vous plaît passer par ce lien que j'ai commenté mon code il y a le copier et le coller et de le tester....

Comment faire de la validation JQuery dans la boîte de dialogue?

si cette réponse est correcte, alors s'il vous plaît marquer comme réponse pour les autres....

InformationsquelleAutor Partap

Vous devez vous connecter pour publier un commentaire.