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

将代码移到click事件处理程序中，并使用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

如果您在表单中放入Submit，则无论您进行的验证如何，它都会尝试提交。它通常会在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);" />

希望这有效:)