简而言之，我想创建一个由两部分组成的表单c.Address <> firstAddress和section_1。在section_2标签B中输入您的出生日期，该日期将决定年龄的输入。原始状态发送按钮被禁用。
第一个问题是如何在内容中输入所需的内容不能为空以使发送按钮启用，如果标签的值超过17年，则应禁用条件section_1？
这个阶段我使用这段代码：
section_2在此步骤中似乎几乎成功，输入您的出生日期手动输入。
第二个问题是，当我想让输入的出生日期更好时，我使用<form action="my_url" method="post">
<div id="section_1" style="padding:1em">
<p>
<label>A : </label><input id="entry_1" type="text" required="" />
</p>
<p>
<label>B : </label><input id="entry_2" type="text" required="" placeholder="dd/mm/yyyy" />
<input id="age" type="hidden" name="age"/>
</p>
<p>
<label>C : </label><input id="entry_3" type="text" />
</p>
</div>
<div id="section_2" style="padding:1em">
<p>
<label>D : </label><input id="entry_4" type="text" required="" />
</p>
<p>
<label>E : </label><input id="entry_5" type="text" required="" />
</p>
<p>
<label>F : </label><input id="entry_6" type="text" required="" />
</p>
</div>
<div>
<input id="send" type="submit" value="submit" />
</div>
</form>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
$(document).ready(function() {
$('#entry_2').keyup(function() {
if(isDate($('#entry_2').val())) {
var age = calculateAge(parseDate($('#entry_2').val()), new Date());
$("#age").val(age);
} else {
$("#age").val('');
}
});
$('input[type="submit"]').prop('disabled', true);
$('input[required]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').prop('disabled', false);
}
if($("#age").val() > 17) {
$('#section_2').addClass('disabled');
$('#section_2 input').prop({
'disabled': true,
'title': 'Skip this step'
});
} else if($("#age").val() < 17) {
$('#section_2').removeClass('disabled');
$('#section_2 input').prop({
'disabled': false,
'title': 'Must be filled'
});
}
});
});
//convert the date string in the format of dd/mm/yyyy into a JS date object
function parseDate(dateStr) {
var dateParts = dateStr.split("/");
return new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
}
//is valid date format
function calculateAge(dateOfBirth, dateToCalculate) {
var calculateYear = dateToCalculate.getFullYear();
var calculateMonth = dateToCalculate.getMonth();
var calculateDay = dateToCalculate.getDate();
var birthYear = dateOfBirth.getFullYear();
var birthMonth = dateOfBirth.getMonth();
var birthDay = dateOfBirth.getDate();
var age = calculateYear - birthYear;
var ageMonth = calculateMonth - birthMonth;
var ageDay = calculateDay - birthDay;
if(ageMonth < 0 || (ageMonth == 0 && ageDay < 0)) {
age = parseInt(age) - 1;
}
return age;
}
function isDate(txtDate) {
var currVal = txtDate;
if(currVal == '')
return true;
//Declare Regex
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = currVal.match(rxDatePattern); // is format OK?
if(dtArray == null)
return false;
//Checks for dd/mm/yyyy format.
var dtDay = dtArray[1];
var dtMonth = dtArray[3];
var dtYear = dtArray[5];
if(dtMonth < 1 || dtMonth > 12)
return false;
else if(dtDay < 1 || dtDay > 31)
return false;
else if((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
return false;
else if(dtMonth == 2) {
var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
if(dtDay > 29 || (dtDay == 29 && !isleap))
return false;
}
return true;
}
</script>
http://keith-wood.name/datepick.html但它失败了，因为它无法识别年龄输入值输入您的出生日期。我添加了这段代码：
datepick.js也许有人可以提出比这更好的解决方案的想法。