2

私はそれを認めます、私はAJAXを初めて使用します。私は常にフォーム自体に投稿アクションを使用してフォームを送信しましたが、それは問題ありませんでした。現在、jQuery 検証プラグインを使用して、AJAX 経由で jQuery でフォームを送信しようとしています。

サーバー側の検証をまだ確認していません。クライアント側の情報を検証して送信できることを確認したいだけです。すべてをまとめた単一のリソースを見つけることができません。検証を機能させることに関する多くの情報を見つけることができ、AJAX を介した投稿に関する情報を見つけましたが、すべてをつなぎ合わせることができないようです。

私の提出コードは次のようになります。

$(function() {
$("#contactForm .submit-button").click(function() {
    var Name = $("#Name").val();
    var Phone = $("#Phone").val();
    var Email = $("#Email").val();
    var Message = $("#Message").val();
    var dataString = 'Name=' + Name + '&Phone=' + Phone + '&Email=' + Email + '&Message=' + Message;

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: dataString,
    success: function(){
        $('#contactForm').fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

});

}))

ただし、jQuery の検証には送信ハンドラーを使用する必要があるようです。

$("#myForm").validate({
rules: {
    command: 'required'
},

messages: {
    command: 'Please enter a command.'
},

submitHandler: function(form) {
    $(form).ajaxSubmit({
        success: function(data) { /* ... */ },
        url: form.action,
   });

私の問題は、コードを組み合わせるいくつかの異なる方法を試してみましたが、魔法を作ることができないようです...検索もいくつか行いましたが、まったく何も思いつきません.

誰かがそれを組み合わせるために何をする必要があるかを説明してくれることを願っています。また、この方法を使用してPHPでサーバー側の検証を行うための優れたリソースを誰かが推奨できる場合は、本当に感謝しています。

ありがとうございました！

4

1 に答える 1

3

.ajaxSubmitjQuery フォーム プラグインを使用します。含めていない場合は、ブラウザ コンソールで確認できるスクリプト エラーが発生します。ajaxSubmit is not a funcionブラウザに応じて読み取りまたは類似

あなたが取ることができるいくつかのアプローチがあります。

検証プラグインの外部で送信ハンドラーを定義し、submitHandler オプションを削除します。

$("#contactForm").submit(function() {
      var $form=$(this)
    /* don't need to manually code each key/value pair*/
    var data= $form.serialize()

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: data,
    success: function(){
        $form.fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

});

または、検証プラグインの submitHandler オプション内で、独自の ajax を呼び出します。

submitHandler: function(form) {
   var data= $(form).serialize()

        $.ajax({
        type: "POST",
        url: "scripts/contactengine.php",
        data: data,
        success: function(){
            $(form).fadeOut(1000);
                  $('.thanks').fadeIn(1000);
        }
        });
    return false;
}
于 2012-10-30T13:50:24.840 に答える