你好，我有这个表格，我想验证，现在我写了这个漂亮的小javascript / jquery组合，但我似乎陷入这个特殊的if语句。
如果它包含“naam”，我检查name属性。 如果我触发点击并进行检查并且满足默认值的条件，则使边框变为红色。
现在我尝试使用更改后的值重新提交此表单，例如我在字段中键入了我的名字。
它应该触发其他并删除红色边框或任何边框。我在这里失踪了什么？
$(document).ready(function() {
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
$(".submit").click(function() {
console.log("huehueheuhe");
i = 0;
//after click loop trough form
$(":input, textarea").each(function() {
//each input and textarea field will be trown at these conditions
//if the value is the same as the default value then go on
if($(this).val() == this.defaultValue){
console.log("hier" + i);
//if the class submit is present skip it
if($(this).hasClass("submit") == false){
console.log("daar" + i);
inputvalue = $(this).val();
//temp
//$(this).css("border","1px solid blue");
//check for the attribute names, could be ids later for globalising
if($(this).attr('name') == "naam"){
console.log("naam");
console.log("inputvalue: "+inputvalue);
if((inputvalue == this.defaultValue) || (inputvalue == "")){
console.log("fout");
$(this).css("border","1px solid red");
}else{
console.log("hij is nu correct");
$(this).css("border","none");
}
}else if($(this).attr('name') == "email"){
//validate email
emailValue = isValidEmailAddress($(this).val());
if(!(emailValue == true)){
$(this).css("border","1px solid orange");
}else{
$(this).css("border","none");
}
}else if($(this).attr('name') == "opmerkingen"){
$(this).css("border","1px solid yellow");
}
}
//alert("Empty Fields!!");
}
i=i+1;
});
});
});
表格：
<input type="text" name="naam" value="* Naam" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="text" name="bedrijfsnaam" value="Bedrijfsnaam" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="text" name="email" value="* E-mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="text" name="telefoonnummer" value="Telefoonnummer" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
答案 0 :(得分：0)
<script type="text/javascript">
$(document).ready(function() {
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
$(".submit").click(function() {
console.log("huehueheuhe");
bFormValid = false;
i = 0;
//after click loop trough form
$(":input, textarea").each(function() {
//each input and textarea field will be trown at these conditions
//if the value is the same as the default value then go on
if($(this).val() == this.defaultValue){
console.log("hier" + i);
//if the class submit is present skip it
if($(this).hasClass("submit") == false){
console.log("daar" + i);
inputValue = $(this).val();
//temp
//$(this).css("border","1px solid blue");
//check for the attribute names, could be ids later for globalising
console.log("naam:: "+ $(this).attr('name'));
if($(this).attr('name') == "naam"){
console.log("naam");
console.log("inputvalue: "+inputValue);
if((inputValue == this.defaultValue) || (inputValue == "")){
console.log("fout");
$(this).css("border","1px solid red");
}
}else if($(this).attr('name') == "email"){
//validate email
emailValue = isValidEmailAddress($(this).val());
if(!(emailValue == true)){
$(this).css("border","1px solid orange");
}
}else if($(this).attr('name') == "opmerkingen"){
if((inputValue == this.defaultValue) || (inputValue == "")){
$(this).css("border","1px solid red");
}
}
}
//alert("Empty Fields!!");
}else{ // this is where the border none should have been!
$(this).css("border","none");
bFormValid = true;
}
i=i+1;
if(bFormValid == true){
$('form#contactform').submit();
}
});
});
});
</script>
答案 1 :(得分：0)
这是因为首次检查默认值
if（$（this）.val（）== this.defaultValue）{
您在if语句的else语句中没有做任何事情。 因此，当填写与默认值不同的内容时，将不会执行任何操作，并且永远不会删除红色边框