<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">×</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文件。
我找到答案了。 我们必须在onSuccess的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');
})
});
});
感谢评论人员。
答案 0 :(得分：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>
（OR）
<button id="showpopup" class="btn btn-primary">Submit</button>
<script>
$("#showpopup").click(function(event){
event.preventDefault();
$('#myModal').show();
});
</script>
答案 1 :(得分：0)
我认为您需要将onsubmit事件处理程序附加到表单并在事件上调用preventDefault，以便停止常规提交。然后在该处理程序中，执行您想要的操作，然后提交。
答案 2 :(得分：0)
我在这里找到了答案。谢谢你的回复。
$(document).click(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'
}
}
}
},
onSuccess: (function(e, data) {
e.preventDefault();
$('.modal').appendTo("body").modal('show');
})
});
});