Jquery Validation Engine: Форма отправки без проверки

Question

Я использую механизм проверки JQuery (https://github.com/posabsolute/jQuery-Validation-Engine) для одной из моих форм. Validation работает хорошо, но не в состоянии остановить форму от получения представлены даже тогда, когда значения полей не выполняют проверки:

У меня есть форма Newsletter 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. Затем проверьте, что ваша форма действительна с использованием метода проверки правильности проверки.

$(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

Если вы поставите представить в форме, он будет пытаться представить независимо от 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);" /> 

Надеюсь, что это работает :)