Javascript does ignores my or statement

Question

Hello i have this form i want to validate and now i wrote this nice little javascript/jquery combo but i seem to get stuck on this particular if statement.

It where i check the name attribute if it contains "naam". If i fire the click and it does its checking and the condition of the default value is met it make the border red.

Now i try to resubmit this form with the changed values, i typed my name into the field for example.

it should fire the else and remove the red border or any border at all. what am i missing here?

$(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;

    });

  });
});

The form:

<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;">

You're not checking whether it *contains* `naam`. You're checking whether it's *exactly* `naam`. — Jon Skeet, May 30 '13 at 20:37
The condition if the attr is "naam" is met. it is the condition that checks for default value/empty value that keeps bugging — Skippengs, May 30 '13 at 20:46
I feel so stupid, offcourse the condition was not met! because i changed the default value by entering my name i never got that input value in the for each loop anymore. i solver it by adding the else with the css border none to the end of the each loop. — Skippengs, May 30 '13 at 20:57

score 0 · Answer 1 · answered May 30 '13 at 21:08

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

score 0 · Answer 2 · answered May 30 '13 at 21:33

It is because of the first check on default value

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

You are not doing anything in the else statement of this if statement. so when something different from the default value is filled in nothing will be done and the red border will never be removed

Javascript does ignores my or statement

2 Answers2