La validation d'un formulaire à l'aide de Jquery focus et blur méthode

Je vais essayer de faire simple validation d'un formulaire en utilisant jQuery. En fait je suis à essayer de valider l'entrée des boîtes de blur et de se concentrer. Je suis juste la validation de la première entrée pour maintenant de la validation de l'utilisateur prénom.Il ne fonctionne pas correctement.

Peut-veuillez m'aider?

HTML & CODE JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder  {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}   
});
});
</script>
</body>
</html>

Merci d'avance

Qu'entendez-vous par "ne fonctionne pas correctement" ? est l'erreur de syntaxe ou d'erreur de logique ?
votre dom structure est mal ... vous pouvez définir une balise dans le tableau de la balise , balise de formulaire doit être à l'extérieur.
J'ai mis à jour ma réponse, son travail comme vous le souhaitez 🙂

InformationsquelleAutor Mike Phils | 2013-07-19

J'ai raffinée de notre code et de son travail comme prévu, il y avait plusieurs erreur dans la définition des éléments dans le tableau,peut-être vous pouvez jeter un oeil à mon code sur la façon de les définir .

DÉMONSTRATION EN DIRECT

CODE HTML:

<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>

CODE JS:

$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
//var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});

Lors de votre utilisation de jQuery lib, assurez-vous que vous faites le plus de cela, j'ai vu qu'il y avait cru la syntaxe javascript dans votre code. jQuery a été conçu pour faciliter les choses par la réduction de la syntaxe.

Édité:
J'ai affiné le code, de sorte que le code de fonctionner sur n'importe quel nombre de fois.

Heureux De Codage 🙂

InformationsquelleAutor dreamweiver

0
```
$('#name').blur(function(){
```
déclencher le flou de l'événement.

À écouter pour le flou de l'événement, par l'utilisateur :
```
$('#name').on("blur", function(){
```
- ya la syntaxe a changé beaucoup de choses ces jours-ci avec la dernière version de jquery lib , mais qui n'a rien à voir flou de la fonctionnalité. dans les deux cas, le flou serait de travailler.
- si je comprends bien , le 1er trigger et il veut écouter. tu veux le premier sur un événement, par exemple, le 2e comme un gestionnaire, lorsque l'utilisateur de le faire. de même, pour la concentration : $('#name').on("focus", function(){
- En mettant ce aussi $('#nom').blur(function(){ C'est seulement la validation de la zone de texte seulement la première fois. Si je tente de valider la deuxième fois, il n'est pas de valider(Si je vide la zone de texte et la couleur de texte de la boîte de rester vert au lieu de jaune).
- J'ai mis à jour ma réponse, il aura du travail à un nombre quelconque de fois 🙂 la raison en est que , après une nouvelle classe css a été ajouté pour la couleur verte, ou rouge de couleur,lorsque le code pénètre dans le cas contraire, la classe css doit être retiré avant d'ajouter une nouvelle classe. j'espère que vous comprendrez mieux si vous examinez le code de violon.
InformationsquelleAutor isThisLove

   if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}

peut être modifié par :

<input type="text" name="name" id="name" placeholder="Name Please" />

http://www.w3schools.com/tags/att_input_placeholder.asp

Pour votre question :

var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
//we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
//if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
//if the element #name is empty, does not contain string   
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
//if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
} 
//on focus name input
$("#name").on("focus", function() {
//if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}

Merci, je suis conscient de l'espace réservé, cependant, je ne veux pas utiliser la place de titulaire de l'attribut.

InformationsquelleAutor isThisLove

Vous devez vous connecter pour publier un commentaire.