在調用模式之前驗證表單

Question

我有一個帶有提交按鈕的表單，當單擊該按鈕時，它會打開一個確認模式，這是一個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();
    });

});

Answer 1

好的，所以您有點擊事件：

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

不知道您要驗證哪個帕爾馬，但可以使用以下方法：

.validate（）

腳本的其余部分（打開模式+提交）：

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構建模式，而是將其隱藏在頁面中並附加事件，在驗證后將其顯示然后發送。

希望這可以幫助！

Answer 2

因此，您想要的是在表單提交按鈕上驗證表單，然后進行驗證，

表單通過驗證后，您將打開帶有確認提交提示的模式。

如果確認，則提交。

因此，請按照下列步驟操作：

1。

<button type="submit" class="btn btn-danger white-text" 
          onclick="return ValidateForm();">

2.創建一個id為myModal的div，然后放置要顯示給用戶的內容以進行確認對話框。

3。

    if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }
    $('#validation-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",

        invalidHandler: function (event, validator) { 
         //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass
          ('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); 
          // set error class to the control group

            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        success: function (label) {
            $('#myModal').modal('show');
            label.closest('.form-group').removeClass('has-error').addClass
        ('has-success'); // set success class to the control group
        }
    });
}