我的表格验证无法正常工作

Question

我正在验证电子邮件字段。 为此，我编写了这样的html代码：

<form action="#">
           <span class="email-field" id="email-field">
             <input type="text" name="email-id" onFocus="if(this.value=='Your email ID'){this.value=''}" onBlur="if(this.value==''){this.value='Your email ID'}" id="email-id" />
             <input type="text" name="email-id" onFocus="if(this.value=='Please enter email ID'){this.value=''}" onBlur="if(this.value==''){this.value='Please enter email ID'}" id="error-email-id" class="hide"/>
           </span>
           <input type="submit" id="submit-button" class="subscribe-button" value="">

</form>

我写的jQuery为此：

$(document).ready(function() {
  var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  URL = 'http://localhost:8000/'


  $("#submit-button").click(function() {
   email = $("#email-id").val()

 if($.trim($("#email-id").val()) === 'Your email ID' || !(filter.test($("#email").val())) ) {
  $('#error-email-id').fadeIn('slow').removeClass("hide");
  $('#email-id').fadeOut('normal').addClass("hide");
  $('#email-field').addClass("error-highlight");
  return false;
 }
 else {

  $.ajax({
  type: 'POST',
  url: URL + "validate/" ,
  data: {"email-id": email},
  success: function(data) {
  },
  dataType: "json",
  });
  $('#form').fadeOut('normal').addClass("hide");
  $('#notification').fadeIn('slow').removeClass("show")
  return false;
 }


  });

程序是这样的：-1.第一次输入email ，如果correct ，它将successful call该url 。 2.如果我输入了错误的ong email或者如果validation fails它将为我提供适当的类，即id'error 'error-email-id'的文本输入字段。 但是，当我单击submit button没有JS call发生。 那就是它不调用任何Jquery所以没有URL 。 它仍然是static 。
提前致谢 ！！！

Answer 1

通过使用return false; 您可以防止以常规方式提交表单。 如果验证成功，则需要手动提交表单（假设您将ID regForm添加到form元素）：

$.ajax({
  type: 'POST',
  url: URL + "validate/" ,
  data: {"email-id": email},
  success: function(data) {
    $('#regForm').submit();
  },    // ...

在提交表单之前，您可能希望检查成功函数中的服务器响应data （来自表单验证的服务器端部分）。