0

モーダルで開くフォームがあります。そのための検証を実装したい。ただし、jQuery フォームの検証を実装しようとしましたが、無駄でした。フォームの検証をトリガーできない主な理由は、フォームの送信ボタンが JavaScript を使用してトリガーされることです。フォームが送信されている間、検証部分は実行されません。

この問題の回避策は何ですか?

ここにフォームがあります::

<div id="__paymentModal" 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">Make Payment Request</h3>
    </div>
    <div class="modal-body">        
        <form method="post" action="" id="__paymentForm" class="form-horizontal">
            <input type="text" name="name" value="" placeholder="Payee Name">
            <input type="text" name="phone" value="" placeholder="Phone"/>
            <input type="text" name="address" value="" placeholder="Address"/>
            <input type="text" name="pincode" value="" placeholder="Pincode" />
            <input type="text" name="amount" value="" placeholder="Amount"/>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" onclick="javascript: reset()">Close</button>
        <button class="btn btn-primary" onclick="javascript: sendPaymentRequest()">Save changes</button>
    </div>
</div>

そして、フォーム送信をトリガーする JavaScript。

var paymentReqBttnObject = undefined;

function reset() {
    window.paymentReqBttnObject = undefined;
}

function openModalForPaymentReq(ele) {
    $('#__paymentForm input[type="text"]').val("");
    $('#__paymentModal').modal( { backdrop: false });
    window.paymentReqBttnObject = ele;
}

function sendPaymentRequest() {
    $.ajax({
        type: "post",
        url: url,
        data: $('#__paymentForm').serialize(),
        processData : true,
        dataType: 'html',
        beforeSend: function() {
                $('#__paymentModal').hide();
        },
        success: function(data, textStatus, xhr) {
                var json = $.parseJSON(data);
                if(json.success == "request_made") {
                    $(paymentReqBttnObject).addClass("btn-requested").html("Payment Requested");
                    $(paymentReqBttnObject).unbind("click");
                } else {

                }
                window.reset();
        },
        error: function(xhr, textStatus, errorThrown) {
            window.reset();

        }
    });
}

jqueryフォームバリデーターも試しましたが、フォームの送信中にエラーが表示されませんでした。null 値のみが更新されるデータベースにすぐに送信されます。

検証 jQuery

$(document).ready(function(){
    $("#__paymentForm").validate({
            rules: {
                phone: {           //input name: fullName
                    required: true,   //required boolean: true/false
                    minlength: 10,
                    maxlength: 10       
                },
                address: {
                        required: true
                },
                pincode: {
                        required: true,
                        minlength: 6,
                        maxlength: 6
                }
                amount: {
                        required: true
                }
            },
            messages: {               //messages to appear on error
                phone: {           //input name: fullName
                    required: "Your Phone Number",   //required boolean: true/false
                    minlength: "Correct contact number.",
                    maxlength: "Correct contact number."
                },
                address: {
                        required: "Where to collect money."
                },
                pincode: {
                        required: "Pincode is required to locate the city and all others.",
                        minlength: "Correct Pincode Please.",
                        maxlength: "Correect Pincode Please"
                }
                amount: {
                        required: "What is the amount."
                },
            },
            submitHandler: function(form) {
                   $(form).ajaxSubmit({
                        success: function(){
                            alert('inside');
                      }
                    });
            }

        });  
})
4

2 に答える 2

3

コードにいくつか問題がありました。

  • PIN,コード検証ルールの後にありません。これは2回登場しました。

  • インライン イベント ( onClick)。jQuery を使用すると、イベントを簡単に添付できます。私のコードでは、「閉じる」ボタンのインライン イベントを次のように置き換えました。

    $('.modal-footer .btn').on('click', function(){ reset(); });

    これは読みやすく、HTML を JavaScript から適切に分離します。詳細について.on()は、ドキュメントを参照してください。

  • フォームが送信されると、検証プラグインがトリガーされます。元のコードでは別のイベント ハンドラーで ajax リクエストを使用していたため、プラグインは呼び出されませんでした。また、タグの外側に送信ボタン (「変更を保存」) があったことも、<form>機能しない別の理由です。

ボタンをフォーム内に移動し、javascript の他の領域を修正/改善したので、動作するようになりました: http://jsfiddle.net/U2hHH/4/ - 現在、書式設定は適切ではありませんが、フォームを正しく検証しています。

コールバックで ajax 関数を 1 つだけにまとめましたsubmitHandler:。ajax は動作するはずですが、保証はできません。動作しない場合は、ブラウザのコンソールを確認してください。

于 2013-06-27T18:46:20.827 に答える