jQuery驗證引擎：表單提交未經驗證

我使用jQuery驗證引擎（https://github.com/posabsolute/jQuery-Validation-Engine）對我的一種形式。該驗證效果很好，但不能阻止越來越提交即使字段值不與驗證符合形式：jQuery驗證引擎：表單提交未經驗證

我有一個通訊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(); 
});

現在我可以看到驗證錯誤消息，但如果我按下提交按鈕，表單提交無關的事實值不是一個電子郵件地址。

什麼想法？

來源

2012-06-01 Amyth

將代碼移動到一個點擊事件處理程序，並使用jquery綁定它。然後使用驗證引擎驗證方法測試您的表單是否有效。

$(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; 
    }) 
});

來源

2012-06-01 06:51:06

感謝這工作周圍的其他方法，因爲它會檢查，如果它是有效的，那麼它返回false。然而我明白了，我已經改變它來檢查它是否有效，然後繼續ajax函數，否則返回false。謝謝@Jason – Amyth

+1。超級解決方案，由於 –

事實上，這是絕招，以檢查的形式是有效的，但我這個自定義AJAX POST上提交表單綁定事件，而不是按一下按鈕的形式可能會甚至貼出當用戶點擊任何進入）'''$（「＃myForm會」）上（ '提交'，函數（如）{e.preventDefault（）; ....}）'''在這種情況下，如果事件觸發字段會的形式，你可以輕鬆地構建數據對象傳遞這樣的：'''數據：$（本）.serialize（）'''，就是這樣，沒有必要建立dataString了;） – qdev

如果你把表格內提交，它會嘗試無論您validation..It的提交在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);" />

希望這個工程:)

來源

2012-06-01 06:47:16

試過了還是一樣的結果 – Amyth

您可以直接配合您的自定義驗證代碼的形式這樣'''

jQuery驗證引擎：表單提交未經驗證

回答

相關問題