你好,我有这个表格我想验证,现在我写了这个漂亮的小 javascript/jquery 组合,但我似乎卡在这个特殊的 if 语句上。
如果它包含“naam”,我会在其中检查名称属性。如果我触发点击并进行检查并且满足默认值的条件,它会使边框变为红色。
现在我尝试使用更改后的值重新提交此表单,例如,我在字段中输入了我的名字。
它应该触发 else 并删除红色边框或任何边框。我在这里想念什么?
$(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;">