[英]How to do jQuery form Validation of html elements before submit
我想對所有三個標簽進行表單驗證,並在驗證后啟用提交按鈕,直到驗證完成,不啟用提交按鈕。
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<link rel="stylesheet" href="css/mystyle.css" />
<script src="js/jquery-2.2.2.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/moment.js"></script>
</head>
<body>
<form id="report-form">
<div id="report-pane" class="row">
<div class="col-xs-1">
<label>Report:</label>
</div>
<div class="col-xs-2">
<select class="form-control" id="report">
<option value="" selected>Select Report</option>
<option id="rep1" value="10">Report 1</option>
<option id="rep2" value="20">Report 2</option>
<option id="rep3" value="30">Report 3</option>
</select>
</div>
</div>
<!--Date Section-->
<div id="date-pane" class="row">
<!--Script for datepicker-->
<script type="text/javascript">
$(function() {
var now = new Date();
var yearsold = new Date();
yearsold.setFullYear((now.getFullYear() - 2));
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: yearsold,
endDate: now
});
var defaultDate = moment().format('DD/MM/YYYY');
$("#datePicker1").val(defaultDate);
$("#datePicker2").val(defaultDate);
});
</script>
<div class="col-xs-1">
<label>Start Date:</label>
</div>
<div class='col-sm-3'>
<input class="datepicker form-control" type="text" id="datePicker1" />
</div>
<div class="col-xs-1">
<label>End Date:</label>
</div>
<div class='col-sm-3'>
<input class="datepicker form-control" type="text" id="datePicker2" />
</div>
</div>
<div id="button-pane" class="row">
<div class="col-lg-12">
<!-- <button class="btn btn-primary">Generate Report</button>-->
<input type="submit" id="requestBtn" class="btn btn-primary" value="Generate Report"></input>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Validation Function Needed
});
</script>
</form>
<script src="js/bootstrap.js"></script>
</body>
</html>
僅在完成所有表單驗證后才啟用提交按鈕
$(document).ready(function () {
$('#ccSelectForm').validate({
rules: {
inputEmail: {
required: true,
email: true
},
inputEmailConfirm: {
equalTo: '#inputEmail'
}
}
});
$('#ccSelectForm input').on('keyup blur', function () {
if ($('#ccSelectForm').valid()) {
$('button.btn').prop('disabled', false);
} else {
$('button.btn').prop('disabled', 'disabled');
}
});
});
我想你想要這樣的東西
$(document).ready(function() {
// before validation
$("#submit").attr("disabled","disabled");
// after validation
$("#submit").removeAttr("disabled");
});
如果你堅持使用Jq定制邏輯,
var validationCallBk = function(){
var report = $('#report').val();
var startDate = $('#datePicker1').val();
var endDate = $('#datePicker2').val();
if(report != '' && startDate == somevaliddate && endDate == somevaliddate)
//enable btn
else
//disable btn
};
$('#report').on('change',validationCallBk);
//use the datepicker on select event and call validationCallBk
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.