0

你好，我有这个表格我想验证，现在我写了这个漂亮的小 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;">
4

2 回答 2

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>
于 2013-05-30T21:08:33.263 回答
0

这是因为第一次检查默认值

if($(this).val() == this.defaultValue){

你没有在这个 if 语句的 else 语句中做任何事情。因此，当填写与默认值不同的内容时，将不会执行任何操作，并且永远不会删除红色边框

于 2013-05-30T21:33:47.957 回答