JQuery formulaire de valider uniquement input type = text ou type = mot de passe
Je suis entrain de créer un formulaire de validation de script et j'ai la case à cocher sur un couple de formes. Comment puis-je me passer de ces et faire seulement de mon formulaire de vérification de la validation des champs de saisie?
Voici mon exemple.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Content-Language" CONTENT="en-us">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function() {
var form_default_texts = [];
form_defaults = function(){
$("form :input").filter("[type='text']").each(function() {
if($(this).val()){
form_default_texts[$(this).name]=$(this).val();
$(this).blur(function(){
if(!$(this).val()){
$(this).val(form_default_texts[$(this).name]).css({color:"#EFEFEF"});
}
}).focus(function(){
$(this).val('').css({color:'#191919'});
}).css({color:'#EFEFEF'});
}
});
};
form_validate = function(form) {
var submit = true;
$(form.elements).filter("[type='text'], [type='password']").each(function() {
var field = $(this);
if(form_default_texts[field.name] == field.val()){
field.focus();
submit=false;
}else{
switch(field.attr('name')){
case '': case 'submit':
//do nothing.
break;
case 'email':
form_clear(field);
if(valid_email(field.val()) == false){
form_error(field);
if(submit){field.focus();}
submit = false;
}
break;
default:
form_clear(field);
if(field.val() == ''){
form_error(field);
if(submit){field.focus();}
submit = false;
}
};
}
});
return submit;
};
valid_email = function(val){
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.test(val)){
return true;
}else{
return false;
}
};
form_clear = function(field){
field.css({background:'#FFFEFB','border-color':'#fafaee'}).next(".error").remove();
}
form_error = function(field){
var form_errors = {fullname:'How do you want to be addressed?',subj:'What is this about?',msg:'What is your message?',email:'Check your email address.',search:'blah blah',q:'testing'};
var form_error = form_errors[field.attr('name')];
if(!form_error){form_error='This field is required';}
field.css({background:'#F8DBDB','border-color':'#E77776'}).after('<span class="error">'+form_error+'</span>');
}
window.onload=form_defaults;
});
</script>
</head>
<body>
<div align="center">
<div class="myform" style="padding:25px 0;">
<form action="/contact/" name="contact" onsubmit="return form_validate(this);" method="POST">
<div class="fb"><span class="finfo round">use this form for quick delivery of your message</span></div>
<div class="fb"><div class="lform round">Your Name:</div>
<input type="text" name="fullname" maxlength="100" size="35" class="inputtext" value=""></div>
<div class="fb"><div class="lform round">Contact Email:</div>
<input type="text" id="email" name="email" maxlength="100" size="35" class="inputtext" value=""></div>
<div class="fb"><div class="lform round">Message Subject:</div>
<input type="text" id="subj" name="subj" maxlength="100" size="55" class="inputtext" value=""></div>
<div class="fb"><div class="lform round">Your Message:</div>
<textarea id="msg" name="msg" cols="50" rows="6" class="inputtext"></textarea></div>
<span><input type="submit" name="submit" class="inputbutton mybutton round" value="Send Message" title="Submit Contact Form"></span>
</form>
<form action="/search.php" method="GET" name="search" onSubmit="return form_validate(this);">
<input type="text" name="q" class="inputtext" value="" style="width:165px;"><input type="submit" class="inputbutton round" value="Search" title="Search">
</form>
<form action="/signup.php" method="GET" name="newsletter" onSubmit="return form_validate(this);">
<input type="text" name="email" class="inputtext" value="test test asdfsdf" style="width:165px;"><input type="submit" class="inputbutton round" value="Register" title="Register Account">
</form>
<form action="/signup.php" method="GET" name="search2" onSubmit="return form_validate(this);">
<input type="text" name="email2" class="inputtext" value="test test" style="width:165px;"><input type="submit" class="inputbutton round" value="Register" title="Register Account">
</form>
</div>
</body>
Merci les gars! Mis à jour avec exemple de travail.
Vous devez vous connecter pour publier un commentaire.
JQuery pouvez sélectionner les choses par attribut par exemple
Dans votre cas, cependant, je pense que vous auriez besoin.
Je recommande d'avoir une approfondie lire la jQuery docs - très bien écrit, et vous trouverez les réponses à beaucoup de jQuery questions. Comment sélectionner un élément particulier est couvert par le sélecteur et en parcourant les sections.
Au lieu de
Essayez juste en sélectionnant les éléments input type=text
Si votre
form
variable est une référence à la forme particulière que vous vous souciez, vous pouvez le faire:La première utilise la syntaxe
$('selector', context)
; le second sélectionne simplement le formulaire d'abord, puis trouve des éléments à l'intérieur d'elle. Voir la jQuery ($) fonction doco pour plus de détails.Ou au sein de votre sortie de
.each()
boucle vous pouvez testerfield.attr('type')
ou tout simplementthis.type
.