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


  });

scnario是这样的： - 1.我第一次输入email，如果是correct，则会successful call url。 2.如果我输入了ong email或validation fails，它会给我一个合适的类，即id '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（来自表单验证的服务器端部分）。

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

1 个答案: