使表单验证返回true?

时间:2012-07-07 14:39:05

标签: javascript jquery

这是我的验证码:

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

当代码运行时,它会检查所有字段以查看它们是否为空。如果.error-banner个脉冲中有一个或多个未正确填充,则会显示单个消息。问题是当表格填写正确时,此横幅仍然闪烁。有人能告诉我哪里出错了吗?

1 个答案:

答案 0 :(得分:2)

据我所知,你的函数无条件地以这个块结束:

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

可能会将其更改为:

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;

我必须同意大多数评论者的观点,即您的方法会留下很大的改进空间。