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

所以你想要的是验证表单提交按钮上的表单然后进行验证，

验证表单后，您希望打开带有确认提交提示的模式。

如果确认然后提交。

因此，请按照以下步骤操作：

1.

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

2. 制作一个带有 id 的 divmyModal并放置要向用户显示的内容以进行确认对话框。

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
        }
    });
}
于 2013-10-21T07:06:56.763 回答
0

好的，所以你有你的点击事件：

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

不确定您正在验证哪个 parmas，但请使用：

。证实（）

脚本的其余部分（打开模式+提交）：

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 回答