0

Bootstrap を使用して簡単な連絡先フォームを作成しており、「送信」ボタンを押したときに次のことを実現したいと考えています。

  • jQuery を使用してフォーム フィールドを検証する
  • PHP をプロセッサとして使用して、検証に合格した場合はフォームを送信します。
  • フォームが電子メールで送信されたことを示す Bootstrap モーダル ダイアログ内のメッセージを表示します。

私の PHP と JS の知識は平均以下であることを知っているので、すべての項目を個別に機能させることができたことを嬉しく思いますが、それらを組み合わせることができません...

情報をいただけますか？

検証には次のものが使用されます。

var validator = $("#contact").validate({
  ...

PHP は以下を使用します。

mail()

次のようなボタンでフォームを送信すると、どちらも機能します。

<button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right">Send</button>

ダイアログをアクティブにするために、ボタンを次のように変更しました。

<button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Send</button>

これにより、モーダルが正しく表示されますが、検証と送信は行われません。

関連する投稿を見つけました: jQuery Modal that appear on form submit。しかし、これを私の場合に具体的に適応させる方法がわかりません。

私はあなたが私に言ったことを適応させようとしましたが、これが私が得たものです:Html部分:

button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Envoyer</button>

と

<div id="submit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Thanks for your mail</h3>
      </div>
      <div class="modal-body">
        <p>We will get back to you soon</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>

私のJSファイルで：

var $validator = {};

$(document).ready(function()
{
    // validate signup form on keyup and submit
    var validator = $("#contact").validate({
       submitHandler: function(form)
        {
            //code to submit your form here
            //code to open your modal here
        errorClass:'error',
        validClass:'success',
        errorElement:'span',
        highlight: function (element, errorClass, validClass) { 
            $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
        }, 
        unhighlight: function (element, errorClass, validClass) { 
            $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
        },
        rules: {
            fname: {
                required: true,
                minlength: 2
            },
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            }
        },
        messages: {
            fname: {
                required: '<span class="help-inline">First name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            name: {
                required: '<span class="help-inline">Name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            email: {
                required: '<span class="help-inline">Email.</span>',
                email: '<span class="help-inline">Ex : name@exemple.com</span>'
            },
            message: {
                required: '<span class="help-block">Message</span>',
                minlength: jQuery.format('<span class="help-block">10 chars</span>')

        $('form').submit(function() {
            if ($validator.numberOfInvalids() > 0) {
                $('#submit').modal('hide');
            } else {
                $('#submit').modal('show');
            }
        }
    });
}
);

確かに何かが欠けていますが、今のところ、モーダル部分のみが実行され、検証部分や送信フォーム部分は実行されません。

これを機能させるために何をすべきか考えていますか?

4

1 に答える 1

0

Bassastance の jquery 検証プラグインを使用している場合は、 http ://docs.jquery.com/Plugins/Validation/validate#toptions で定義されている submitHandler オプションを探しています。

$(document).ready(function()
    {
        // validate signup form on keyup and submit
        var validator = $("#contact").validate({
           submitHandler: function(form)
            {
                //code to submit your form here
                //code to open your modal here
            }
        });
    }
);

更新: Fred から提供された追加のコードに基づいて、この回答を更新しています。

Javascript:

var $validator; //declared for further use later

$(document).ready(function()
{
    // validate signup form on keyup and submit
    $validator = $("#contact").validate({
        errorClass:'error',
        validClass:'success',
        errorElement:'span',
        highlight: function (element, errorClass, validClass) { 
            $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
        }, 
        unhighlight: function (element, errorClass, validClass) { 
            $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
        },
        rules: {
            fname: {
                required: true,
                minlength: 2
            },
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            }
        },
        messages: {
            fname: {
                required: '<span class="help-inline">First name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            name: {
                required: '<span class="help-inline">Name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            email: {
                required: '<span class="help-inline">Email.</span>',
                email: '<span class="help-inline">Ex : name@exemple.com</span>'
            },
            message: {
                required: '<span class="help-block">Message</span>',
                minlength: jQuery.format('<span class="help-block">10 chars</span>')
            }
        },
        submitHandler: function(form) //submitHandler is an option taken by the validate function
        {
            //i put your submission code in here

            $('form').submit(function() {
                if ($validator.numberOfInvalids() > 0) 
                {
                    $('#submit').modal('hide');
                } else 
                {
                    $('#submit').modal('show');
                }
            });
        }
    });
});
于 2013-01-01T01:20:50.533 に答える