web-dev-qa-db-ja.com

検証後にフォームを送信するjquery

私は次のフォームを持っています：

<form id="form" action="comments.php" method="post">
  <ul>
    <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
    <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
    <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

フォーム送信用のJQueryに続く：

target: '#preview', 
  success: function() { 
  $('#formbox').slideUp('fast'); 
}

今問題は、フォーム検証JQueryコードもあることです

$().ready(function() {
    // validate comment form
    $("#form").validate({ 
    });
});

どちらもうまく機能し、フォームは3つのフィールドすべてを空にすることはできませんが、フォーム内の日付はとにかくデータベースに送信されることを警告するポップアップを表示します。私はフォームの検証に次のコードを使用しています http://bassistance.de/jquery-plugins/jquery-plugin-validation/ したがって、質問は最初のjqueryを2番目に追加する方法なので、最初に1回実行されます必要なフィールドが入力されていますか？

誰かが助けてくれることを願っています。ありがとう。

jqueryformsvalidationform-submit
10
DigitalWhirl LLC

あなたの例では、ページの制御フローについては明確ではありませんが、どこかでsubmit()メソッドを呼び出していると想定しています。フォームを検証した後、フォームを送信する前に、valid()メソッドを使用してその検証を確認してください。コードは次のようになります。

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();
15
Abbas

フォームを手動で送信する場合は、jQueryバインドイベントをバイパスする必要があります。次のいずれかの方法で行うことができます。

$('#form_id')[0].submit();

または

$('#form_id').get(0).submit();

[0]またはget（0）は、jQueryオブジェクトの代わりにDOMオブジェクトを提供します。

15
Francisco Goldenstein

私はあなたの検証プラグインについて何も知りませんが、通常あなたはこのコードの平和を使うことができます

<script>

    $("form").submit(function() {
      if (validationIsTrue()) {
        return true;
      }
      else {
        return false;
      }
    });
</script>

検証を行ってから、フォームの送信機能にtrue/falseを返す必要があります。プラグインがブール値を返す場合、次のようなことを試すことができます：

$("form").submit(function() {
   return $(this).validate({ .... });
});
4
Grrbrr404

コードスニペットには「日付」と呼ばれるものが何もないので、「フォーム内の日付が送信されました」とは意味がありません。

私は.validate（）プラグインを広範囲に使用しました...あなたが使用している検証プラグインがあなたが使用できるsubmitHandler関数を持っているということです...

// validate comment form
$("#form").validate({
submitHandler : function(form) {
    //do something here
    form.submit();
}
});

SubmitHandlerは、検証のすべてのルールが満たされた場合にのみ呼び出されます。つまり、あなたの場合、「必須」のフィールドが3つあります。つまり、3つのフィールドすべてに値が入力されていない限り、このフォームは送信されません。

これで、提供された情報があれば、あなたが説明している問題を示すものは何もないことが確実にわかります。より多くのより良い情報を提供することは、何が問題かを理解するのに役立ちます。

3
kasdega

JQueryフォーム検証プラグインからsubmitHandlerを使用できます

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>
0
Raju