1

フォームの 1 つに Jquery Validation Engine (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();
});

検証エラー メッセージが表示されるようになりましたが、送信ボタンを押すと、値が電子メール アドレスではないという事実に関係なく、フォームが送信されます。

何か案は ？

4

2 に答える 2

10

コードをクリック イベント ハンドラーに移動し、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;
    })
});
于 2012-06-01T06:51:06.860 に答える
1

フォーム内に 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);" />

これがうまくいくことを願っています:)

于 2012-06-01T06:47:16.627 に答える