2013-05-30 45 views
0

你好我有這種形式我想驗證,現在我寫了這個很好的小javascript/jquery組合,但我似乎卡住了這個特殊的如果聲明。JavaScript確實忽略了我的或陳述

它在哪裏檢查名稱屬性,如果它包含「naam」。 如果我點擊並點擊它進行檢查,並且滿足默認值的條件,則將邊框設爲紅色。

現在我嘗試重新提交這個表單與更改的值,我鍵入我的名字到字段爲例。

它應該觸發其他並刪除紅色邊框或任何邊框。我在這裏錯過了什麼?

$(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;"> 
+2

您不檢查它是否包含* naam。你正在檢查它是否*完全*'naam'。 –

+1

哇..帽子關閉的正則表達式:) – karthikr

+0

條件,如果attr是「納姆」符合。這是條件,檢查默認值/空值,不斷調查 – Skippengs

回答

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> 
0

這是因爲.VAL()==這個默認值

如果($(本)第一檢查。 defaultValue){

你沒有做任何事情在這個if語句的else語句中。 因此,當填寫與默認值不同的東西時,將不會執行任何操作,並且紅色邊框將永遠不會被刪除。