Question

我有一个带有提交按钮的表单，当单击该按钮时，它会打开一个确认模式，这是一个Twitter Bootstrap模式。如果单击了模态确认按钮，它将提交for，但在单击模态按钮而不是表单按钮后进行验证。我也在使用jQuery Validation

我希望首先验证表单，停止提交，显示确认模式，然后确认提交表单。

我意识到这可能是不可能的，但我不知道怎么做。

<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){

不确定您要验证哪个parmas但使用此：

.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。创建一个标识为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
        }
    });
}

验证表单在调用模态之前

2 个答案: