jQuery验证日期字段
[英]JQuery Validation For Date Field
问题描述
I'm encountering a problem in validating input fields, I have three input fields, one for first name, last name, and date of birth, when I leave the fields empty it shows warning messages as defined in the code, when I enter data into the fields the message disappears except for the date field. 
我在验证输入字段时遇到问题，我有三个输入字段，一个用于名字，姓氏和生日，当我将这些字段留空时，当输入数据时会显示代码中定义的警告消息进入字段，除日期字段外，消息消失。 It disappears only when I click once again. 仅当我再次单击时，它才会消失。 Here is my code 这是我的代码
<!DOCTYPE html> <html> <head id="html"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script> <script> $(function() { $("#date-of-birth").datepicker( { dateFormat:'dd-mm-yy', changeMonth: true, changeYear: true, }); }); </script> <style > #first-name{ width: 300px; margin-top: 10px; margin-left: 510px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #last-name{ width: 300px; margin-top: 5px; margin-left: 510px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #date-of-birth{ width: 300px; margin-top: 5px; margin-left: 510px; padding-left: 10px; border: 1px solid grey; border-radius: 5px; } #first-name-warning-message{ padding-left: 640px; font-size: 18px; font-weight: bold; } #last-name-warning-message{ padding-left: 640px; font-size: 18px; font-weight: bold; } #dob-warning-message{ padding-left: 640px; font-size: 18px; font-weight: bold; } </style> </head> <body id="body"> <form id="sign-up" action="#" method="post"> <div id="row-one"> <input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15"> </div> <div id="span-container"> <span id="first-name-warning-message" class="text-danger"> </span> </div> <div id="row-two"> <input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15"> </div> <div id="span-container"> <span id="last-name-warning-message" class="text-danger"> </span> </div> <div id="row-three"> <input class="date-picker" id="date-of-birth" name="user_dob" placeholder="Date Of Birth" readonly="true"> </div> <div id="span-container"> <span id="dob-warning-message" class="text-danger"> </span> </div> </form> <script> $(document).ready(function(){ $('#first-name-warning-message').hide(); $('#last-name-warning-message').hide(); $('#dob-warning-message').hide(); var first_name_error=true; var last_name_error=true; var dob_error=true; $('#first-name').focusout(function(){ validate_first_name(); }); $('#last-name').focusout(function(){ validate_last_name(); }); $('#date-of-birth').focusout(function(){ validate_date_of_birth(); }); function validate_first_name(){ var first_name=$('#first-name').val(); var first_name_regex=/^[a-zA-Z ]{3,15}$/; if(first_name.length==''){ $('#first-name-warning-message').show(); $('#first-name-warning-message').html("Please Enter Your First Name !"); first_name_error=false; return false; } else{ $('#first-name-warning-message').hide(); } if(first_name.length<3){ $('#first-name-warning-message').show(); $('#first-name-warning-message').html("First Name Not Valid !"); first_name_error=false; return false; } else{ $('#first-name-warning-message').hide(); } if(!first_name_regex.test(first_name)){ $('#first-name-warning-message').show(); $('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !"); first_name_error=false; return false; } else{ $('#first-name-warning-message').hide(); } } function validate_last_name(){ var last_name=$('#last-name').val(); var last_name_regex=/^[a-zA-Z ]{3,15}$/; if(last_name.length==''){ $('#last-name-warning-message').show(); $('#last-name-warning-message').html("Please Enter Your Last Name !"); last_name_error=false; return false; } else{ $('#last-name-warning-message').hide(); } if(last_name.length<3){ $('#last-name-warning-message').show(); $('#last-name-warning-message').html("Last Name Not Valid !"); last_name_error=false; return false; } else{ $('#last-name-warning-message').hide(); } if(!last_name_regex.test(last_name)){ $('#last-name-warning-message').show(); $('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !"); last_name_error=false; return false; } else{ $('#last-name-warning-message').hide(); } } function validate_date_of_birth(){ var date_of_birth=$('#date-of-birth').val(); if(date_of_birth.length==''){ $('#dob-warning-message').show(); $('#dob-warning-message').html("Please Enter Your Date Of Birth !"); dob_error=false; return false; } else{ $('#dob-warning-message').hide(); } } }); </script> </body> </html>
can y'all provide me a solution for this?. 你们能为我提供解决方案吗？ All answers are appreciated. 所有的答案表示赞赏。 Thanks in advance. 提前致谢。
1 个解决方案
解决方案1
1 已采纳 2018-08-10 15:39:14
As your code is currently structured, the focusout and blur events will both be triggered before the value of $('#date-of-birth') has been set. 由于您的代码当前是结构化的，因此focusout和blur事件都将在设置$('#date-of-birth')的值之前触发。 It will not run again after the value is set unless you enter and leave the field again. 设置该值后，它将不会再次运行，除非您再次输入和离开该字段。
Instead of calling your validate_date_of_birth() on focusout or blur, consider adding an onClose function to your datepicker definition with your validate logic. 与其在聚焦或模糊时调用validate_date_of_birth() ，不如考虑使用验证逻辑将onClose函数添加到datepicker定义中。 This way it will not run the validation until the datepicker has closed and a value has been assigned. 这样，只有关闭日期选择器并分配了值之后，它才会运行验证。
ie, 即
$(function() {
$("#date-of-birth").datepicker({
dateFormat:'dd-mm-yy',
changeMonth: true,
changeYear: true,
onClose: function(selectedDate){
var date_of_birth=selectedDate;
if(date_of_birth.length==''){
$('#dob-warning-message').show();
$('#dob-warning-message').html("Please Enter Your Date Of Birth !");
dob_error=false;
return false;
}
else{
$('#dob-warning-message').hide();
}
}
});
});
See this question for an example of how onClose works, or the jQuery documentation . 有关onClose工作方式示例或jQuery文档 ，请参onClose 问题 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.