0

送信ボタンのあるフォームがあり、ボタンをクリックすると、Twitter Bootstrap モーダルである確認モーダルが開きます。モーダルの確認ボタンをクリックすると for が送信されますが、フォーム ボタンではなくモーダル ボタンがクリックされた後に検証が行われます。jQuery検証も使用しています

最初にフォームを検証し、送信を停止し、確認モーダルを表示し、確認された場合はフォームを送信したいと考えています。

これは不可能かもしれませんが、どうすればよいか途方に暮れています。

<form action="URL" method="POST" id="validation-form" class="confirm-form">

    <label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Select One</label>

    <select data-placeholder="Select one..." data-rule-required="true">
        <option></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>

    <button type="submit" class="btn btn-danger white-text modal-toggle" data-toggle="modal" data-target="#modal-dialog" data-modal-type="form-confirm" data-modal-title="Delete Transaction" data-modal-text="Are you sure you want to delete this transaction?"><i class="icon-ok"></i> Delete</button>
    <a href="http://localhost.testing/form-modals.html"><button type="button" class="btn"><i class="icon-ban-circle"></i> Cancel</button></a>

</form>

$('.modal-toggle').click(function(e){
    // modal data assigned
    modalType = $(this).data('modal-type').toLowerCase();
    modalTitle = $(this).data('modal-title');
    modalText = $(this).data('modal-text');

    // check which buttons to output
    if(modalType == "confirm"){     
        modalUrl = $(this).data('modal-confirm-url');
        modalOptions = '<a href="' + modalUrl + '" class="btn btn-primary showhouse-colour"><i class="icon-ok"></i> Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle"></i> No</button>';
    }else if(modalType == "alert"){
        modalOptions = '<button class="btn btn-primary showhouse-colour" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i> Ok</button>';
    }else if(modalType == 'form-confirm'){
        modalOptions = '<button class="btn showhouse-colour white-text" data-dismiss="modal" id="confirm-form-yes"><i class="icon-ok"></i> Yes</button><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle"></i> No</button>';
    }

    // output modal footer buttons
    $('.modal-title').html(modalTitle);
    $('.modal-text').html(modalText);
    $('.modal-footer').html(modalOptions);

    // if form-confirm, submit it
    $('#confirm-form-yes').click(function(){
        $('.confirm-form').submit();
    });

});
4

2 に答える 2

0

わかりましたので、クリックイベントがあります：

$('.modal-toggle').click(function(e){

どのパルマで検証しているかわかりませんが、これを使用してください：

。検証（）

スクリプトの残りの部分 (モーダルを開いて送信):

modalType = $(this).data('modal-type').toLowerCase();
modalTitle = $(this).data('modal-title');
modalText = $(this).data('modal-text');

// check which buttons to output
if(modalType == "confirm"){     
    modalUrl = $(this).data('modal-confirm-url');
    modalOptions = '<a href="' + modalUrl + '" class="btn btn-primary showhouse-colour"><i class="icon-ok"></i> Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle"></i> No</button>';
}else if(modalType == "alert"){
    modalOptions = '<button class="btn btn-primary showhouse-colour" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i> Ok</button>';
}else if(modalType == 'form-confirm'){
    modalOptions = '<button class="btn showhouse-colour white-text" data-dismiss="modal" id="confirm-form-yes"><i class="icon-ok"></i> Yes</button><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle"></i> No</button>';
}

// output modal footer buttons
$('.modal-title').html(modalTitle);
$('.modal-text').html(modalText);
$('.modal-footer').html(modalOptions);

// if form-confirm, submit it
$('#confirm-form-yes').click(function(){
    $('.confirm-form').submit();
});
});

JS を介してモーダルを作成するのではなく、イベントが添付されたページに隠して、検証後に表示してから送信することをお勧めします。

お役に立てれば！

于 2013-10-18T15:57:29.123 に答える