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

デフォルト値の最初のチェックのためです

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

このif文のelse文では何もしていません。そのため、デフォルト値とは異なるものが入力された場合、何も行われず、赤い境界線が削除されることはありません

于 2013-05-30T21:33:47.957 に答える
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 に答える