0

我有输入作为日期输入。我已经进行了验证，其中 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');
}





});

仅使用一种模态就可以实现类似的事情吗？或者我需要为每条消息提供一个模式？最后，这样的事情甚至可能吗？

请帮助我，您可以自由编辑我的 jsfiddle

4

1 回答 1

0

我自己做的……还是谢谢

http://jsfiddle.net/dzorz/Q585q/

如果：

        $('<div id="errors"/>').html(errors).appendTo('.modal-body');
        $('#errorModal').modal('show');
于 2013-06-18T08:46:27.157 回答