Question

Here is my validation code:

  function validateEnquiryForm() {
      var x = document.forms["enquiry"]["name"].value;
      if(x == null || x == "" || x == "Name") {
          $('#name').removeClass('custom').addClass('error');
          $('.name-error').show();
          //return false;
      } else if(x !== null || x !== "" || x !== "Name") {
          $('#name').removeClass('error').addClass('custom');
          $('.name-error').hide();
      }
      var x = document.forms["enquiry"]["phone"].value;
      if(x == null || x == "" || x == "Phone Number") {
          $('#phone').removeClass('custom').addClass('error');
          $('.phone-error').show();
          //return false;
      } else if(x !== null || x !== "" || x !== "Phone Number") {
          $('#phone').removeClass('error').addClass('custom');
          $('.phone-error').hide();
      }
      var x = document.forms["enquiry"]["requirements"].value;
      if(x == null || x == "" || x == "Add any other extra requirements here...") {
          $('#requirements').removeClass('textarea-1').addClass('error');
          $('.requirements-error').show();
          //return false;
      } else if(x !== null || x !== "" || x !== "Add any other extra requirements here...") {
          $('#requirements').removeClass('error').addClass('custom');
          $('.requirements-error').hide();
      }
      var x = document.forms["enquiry"]["summary"].value;
      if(x == null || x == "" || x == "Summarise your project in a few key words...") {
          $('#summary').removeClass('custom').addClass('error');
          $('.summary-error').show();
          //return false;
      } else if(x !== null || x !== "" || x !== "Summarise your project in a few key words...") {
          $('#summary').removeClass('error').addClass('custom');
          $('.summary-error').hide();
      }
      var x = document.forms["enquiry"]["email"].value;
      var atpos = x.indexOf("@");
      var dotpos = x.lastIndexOf(".");
      if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
          $('#email').removeClass('custom').addClass('error');
          $('.email-error').show();
          //return false;
      } else if(atpos > 1 || dotpos > atpos + 2 || dotpos + 2 <= x.length) {
          $('#email').removeClass('error').addClass('custom');
          $('.email-error').hide();
      }
      $('.error-banner').effect("pulsate", {
          times: 2
      }, 1000);
      return false;
  }

When the code runs it checks all the fields to see if they are blank. If one or more are incorrectly filled in the .error-bannerpulses and individual messages are displayed. The problem is when the form is filled in correctly this banner still flashes. Could someone tell me where I am going wrong..?

Answer 1

As far as I can tell, your function ends with this block, unconditionally:

$('.error-banner').effect("pulsate", {
  times: 2
}, 1000);
return false;

Maybe change it to:

var valid = true;

// in your error handling conditionals, set valid to false:
if(x == null || x == "" || x == "Phone Number") {
    $('#phone').removeClass('custom').addClass('error');
    $('.phone-error').show();
    valid = false;
} 

...

if (!valid) {
  $('.error-banner').effect("pulsate", {
    times: 2
  }, 1000);
}
return valid;

I have to agree with the majority of commenters that your approach leaves a lot of room for improvement, though.