Jquery验证引擎：没有验证的表单提交

Question

我正在将 Jquery 验证引擎 (https://github.com/posabsolute/jQuery-Validation-Engine) 用于我的一种表单。验证运行良好，但即使字段值不符合验证，也无法阻止表单提交：

我有一个如下的时事通讯 Sigunp 表格：

<form id="submit-newsletter" method="POST" action="">
   <input type="text" class="searchform validate[required, custom[email]]" value="Enter Your Email" id="email" name="nw-email" onblur="defaultInput(this);" onfocu    s="clearInput(this);" />
   <input type="hidden" id="newsletter" name="newsletter" value="nl" />
   <input type="submit" class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />
</form>

这个表单通过ajax提交如下：

// Newsletter Subscription Without Refresh

function newsletterSubscribe(e) {
  e.preventDefault();
  var dataString = 'nw-email=' + $('input[name=nw-email]').val() + '&newsletter=' + $('input[name=newsletter]').val();
  $.ajax({
    type: "POST",
    url: "/newsletter/",
    data: dataString,
    success: function () {
      $('#newsletter-box').html('<div id="message"></div>');
      $('#message').html('<img width="18px" height="18px" src="/static/img/smtick.png" /><h5>Thank You !</h5>')
      .append('<p>We have recieved your request. Please Check your mail for activation instructions. You will start recieving our newsletter once you have verified t    his email address.</p>')
      .hide()
      .fadeIn(1200);
      }
  });
  return false;
}

验证触发器如下：

$(document).ready(function() {
  $('#submit-newsletter').validationEngine();
});

现在我可以看到验证错误消息，但是如果我按下提交按钮，则无论值不是电子邮件地址，都会提交表单。

有什么想法吗？

Answer 1

将代码移动到单击事件处理程序中并使用 jquery 绑定它。然后使用验证引擎 validate 方法测试您的表单是否有效。

$(function(){
    $('#newsletter-signup').click(function(e){
         e.preventDefault();

         //if invalid do nothing
         if(!$("#submit-newsletter").validationEngine('validate')){
         return false;
          }


      var dataString = 'nw-email=' + $('input[name=nw-email]').val() + '&newsletter=' + $('input[name=newsletter]').val();
      $.ajax({
        type: "POST",
        url: "/newsletter/",
        data: dataString,
        success: function () {
          $('#newsletter-box').html('<div id="message"></div>');
          $('#message').html('<img width="18px" height="18px" src="/static/img/smtick.png" /><h5>Thank You !</h5>')
          .append('<p>We have recieved your request. Please Check your mail for activation instructions. You will start recieving our newsletter once you have verified t    his email address.</p>')
          .hide()
          .fadeIn(1200);
          }
      });
      return false;
    })
});

Answer 2

如果您将提交放在表单中，它将尝试提交而不管您的验证如何。它主要发生在 Mozilla 中。..

尝试将提交放在表单之外

<form id="submit-newsletter" method="POST" action="">
   <input type="text" class="searchform validate[required, custom[email]]" value="Enter Your Email" id="email" name="nw-email" onblur="defaultInput(this);" onfocu    s="clearInput(this);" />
   <input type="hidden" id="newsletter" name="newsletter" value="nl" />
</form>
   <input type="submit" class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />

甚至你也可以在表单外创建一个提交按钮..

<button class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />

希望这可行:)