[英]Show Modal on form validation
我是javascript和boostrap的初學者。 我想要的是:1.用戶單擊提交按鈕。 2.使用entry_check()驗證表單。 3.表單驗證成功。 使用用戶輸入值打開引導程序MODAL。 MODAL將充當帶有用戶值的確認框,以提交或取消。4.單擊MODAL POST表單中的Submit按鈕。
形成
<form role="form" id="ps_entry" name="ps_entry" method="post" action="/user/accounts/ps/add/">
Date<input name="date" id="date" class="form-control" autocomplete="off" />
Rate<input name="rate" id="rate" class="form-control" autocomplete="off" onkeypress="AmtCalc()" />
Box<input name="box" id="box" class="form-control" autocomplete="off" />
Amount<input name="amount" id="amount" class="form-control" readonly />
Payment Date<input name="pdate" id="pdate" class="form-control" autocomplete="off" />
Remarks<textarea name="remarks" id="remarks" class="form-control" autocomplete="off"></textarea></td>
entry_check()
function entry_check(){
var x = document.forms["ps_entry"]["date"].value;
if (x == null || x == "") {
alert("Please select Date");
return false;
}
var x = document.forms["ps_entry"]["rate"].value;
if (x == null || x == "") {
alert("Rate cannot be empty");
return false;
}
var x = document.forms["ps_entry"]["box"].value;
if (x == null || x == "") {
alert("No. of Box cannot be empty");
return false;
}
}
按鍵
<input type="button" name="submitBtn" value="Submit" id="submitBtn" onclick="submitForm()" class="btn btn-default" />
onclick提交
$(document).ready(function(){
$('#submitBtn').click(function(){
var success = entry_check();
if (success) {
$('#confirm-submit').modal('show');
$('#dat').html($('#date').val());
$('#rat').html($('#rate').val());
$('#bo').html($('#box').val());
$('#amoun').html($('#amount').val());
$('#pdat').html($('#pdate').val());
$('#remark').html($('#remarks').val());
$('#submit').click(function(){
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#ps_entry').submit();
});
}
});
});
如果您想使用更簡潔的方式來驗證表單,則可以查看jquery validate插件。
在提交時,請執行以下操作...
var formValidationRules = {
rules: {
date: {
required: true
},
rate: {
required: true
},
box: {
required: true
},
(... more form fields)
}
};
$("#ps_entry").submit(function(){
$(this).validate(formValidationRules);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.