日付入力として機能する入力があります。日付が有効な形式であるかどうか、および番号付けも正しいかどうかをjquery validateがチェックする検証を行いました...更新ボタンをクリックしてテストできます。
私の考えは、これらの検証エラー メッセージを Twitter ブートストラップ モーダル内に表示することです。したがって、ユーザーが空のフィールドや間違った形式の日付などを更新しようとすると、対応するメッセージでモーダルになります。
ボタン「モーダルの例」で起動できるモーダルの例を作成しました
ここで状況を確認して編集できます：http://jsfiddle.net/dzorz/tdpkY/
html:
<form id="date" action="#" method="post">
<div>
<label for="datetime">yyyy-mm-dd<input type="text" name="datetime" id="datetime" /></label>
<button type="submit" name="submit" id="submit" class="btn btn-primary" />Update</button>
</div>
</form>
<button class="btn btn-small btn-primary" type="button" data-toggle="modal" href="#errorModal" >modal example</button>
<!-- Modal -->
<div id="errorModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Date format error!</h3>
</div>
<div class="modal-body">
<p>Errors should appear here!</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
脚本：
$('#date').submit(function(e) {
e.preventDefault();
if ($('#errors').length) {
$('#errors').remove();
}
var datetime = $('#datetime').val();
var errors = '';
if (!/^\d{4}\-\d{2}\-\d{2}$/.test(datetime)) {
errors += '<span class="error">Not a valid date format</span>';
} else {
var parts = datetime.split('-');
var day = parts[2];
var month = parts[1];
var year = parts[0];
var $day = (day.charAt(0) == '0') ? day.charAt(1) : day;
var $month = (month.charAt(0) == '0') ? month.charAt(1) : month;
if ($day > 31 || $day < 1) {
errors += '<span class="error">Not a valid day</span>';
}
if ($month > 12 || $month < 1) {
errors += '<span class="error">Not a valid month</span>';
}
var now = new Date();
var currentYear = now.getFullYear();
if (year > currentYear || year < (currentYear - 100)) {
errors += '<span class="error">Not a valid year</span>';
}
}
if (errors != '') {
$('<div id="errors"/>').html(errors).appendTo('#date');
} else {
alert('Valid date');
}
});
1つのモーダルだけでそのようなことは可能ですか? または、メッセージごとに 1 つのモーダルが必要ですか? 最後に、そのようなことさえ可能ですか？
私を助けてください、あなたは私のjsfiddleを自由に編集できます