javascript - 使用 Bootstrap 验证器验证后停止表单提交并打开 Bootstrap 模式(确认对话框)

Question

<script>
        $(document).ready(function() {
            $('#idfundtransferownaccounts').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'tACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    tACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'fACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    amountValue: {
                        validators: {
                            notEmpty: {
                                message: 'please enter a amount'
                            }
                        }
                    },
                    fACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    },
                    tACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    }
                }
            });
        });
</script>

这是我使用 Bootstrap 验证器进行的表单验证。

<form class="form-horizontal" class="form-inline" name="fundtransferownaccounts" id="idfundtransferownaccounts" method="post" action="FundTransferToOwnAccounts" style="margin-left: px;margin-right: 5px;">
                    <div class="form-group">
                        <label class="control-label col-sm-3">From Account Number*</label>
                        <div class="col-sm-6">
                            <div class="btn-group div-inline">
                                <c:set var="accounts" scope="session" value="${accounts}"/>
                                <c:set var="accountslist" value="${accounts.getAccountlist()}"/>
                                <select name="fACNumber" id="faccountnumber" class="form-control" >
                                    <option selected disabled>Select Account Number</option>
                                    <c:forEach var="num" begin="0" end="${accountslist.size()-1}">
                                        <c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/>
                                        <option value="${accNum}"><c:out value="${accNum}"/></option>
                                    </c:forEach>
                                </select>
                            </div>
                            <input type="checkbox" id="getfaccountbalance" onclick="getfAccountBalance(document.getElementById('faccountnumber').value, this)"> View Account Balance
                            <label id="faccountbalance" style="color: blue" ></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3">To Account Number*</label>
                        <div class="col-sm-6">
                            <div class="btn-group" >
                                <c:set var="accounts" scope="session" value="${accounts}"/>
                                <c:set var="accountslist" value="${accounts.getAccountlist()}"/>
                                <select name="tACNumber" id="taccountnumber" class="form-control" >
                                    <option selected disabled>Select Account Number</option>
                                    <c:forEach var="num" begin="0" end="${accountslist.size()-1}">
                                        <c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/>
                                        <option value="${accNum}"><c:out value="${accNum}"/></option>
                                    </c:forEach>
                                </select>
                            </div>
                            <input type="checkbox" id="gettaccountbalance" onclick="gettAccountBalance(document.getElementById('taccountnumber').value, this)"> View Account Balance
                            <label id="taccountbalance" style="color: blue"> </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">Transfer Amount*</label>
                        <div class="col-sm-6">
                            <input name="amountValue" id="transferamount" type="text" class="input-sm"  maxLength="11" onkeyup="$(this).val(validcurrencyinput($(this).val()))" placeholder="0 . 00">
                            <div class="form-group div-inline">
                                <select name="currencyType" id="currencytype" class="form-control" style="margin-left: 15px;font-size: 10px;">                                    
                                    <option>LKR</option>
                                    <option>USD</option>
                                    <option>EURO</option>
                                    <option>DINAR</option>
                                </select>
                            </div>
                            <div class="space"></div>
                            <label id="amountvalue" style="color: blue"> </label>
                            <label style="color:#017ebc; font-size: 11px;font-weight: bold;">Note: To transfer ten either enter 10 or 10.00</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">From Account Narration*</label>
                        <div class="col-sm-6">
                            <input name="fACNarration" type="text" class = "form-control input-sm">
                            <div class="space"></div>
                            <label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">To Account Narration*</label>
                        <div class="col-sm-6">
                            <input name="tACNarration" type="text" class = "form-control input-sm">
                            <div class="space"></div>
                            <label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-10">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-primary" onClick="this.form.reset();">Reset</button>    
                        </div>
                    </div>
                </form>

这是表格

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Confirm Your Transaction</h4>
        </div>
        <div class="modal-body">
            <p>Are You Sure to Proceed the Transaction</p>
        </div>
        <div class="modal-footer">
            <button type="button"  id="submit" class="btn btn-primary" data-dismiss="modal" onclick="submitform()">Proceed</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

这是我实现的 Bootstrap 模式。现在我想弹出这个模式，然后将数据发送到 servlet 文件。但在这里，数据在按钮提交后传递到 servlet 文件。

我找到了答案，伙计们。我们必须在成功时的 Bootstrap 验证中编写一些代码。这是修改后的代码。

$(document).click(function() {
            //$("#confirmownaccountsdiv").hide();
            $('#idfundtransferownaccounts').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'tACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    tACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'fACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    amountValue: {
                        validators: {
                            notEmpty: {
                                message: 'please enter a amount'
                            }
                        }
                    },
                    fACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    },
                    tACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    }
                },
                onSuccess:(function(e, data) {
                    e.preventDefault();
                    $('.modal').appendTo("body").modal('show');
                })
            });
        });

感谢各位的评论。

Answer 1

使用按钮:

<button type="submit" class="btn btn-primary">Submit</button>

从按钮中删除属性type="submit"。

属性type="submit"会自动提交您的表单。

<button onclick="showpopup()" class="btn btn-primary">Submit</button>

<script>
function showpopup() {
    $('#myModal').show();
}
</script>

(或)

<button id="showpopup" class="btn btn-primary">Submit</button>

<script>
$("#showpopup").click(function(event){
    event.preventDefault();
    $('#myModal').show();
});
</script>