Html文件：index.html。不得不用javascript验证因为无法获得必需的属性。我做了一个带有几个字段的示例文件并且它有效，不知道它为什么不在这个表单上工作。请帮忙。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Cost</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/nodep-date-input-polyfill.dist.js"></script>
<script src="js/moment.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/hireCost.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.0.0.js"></script>
<script src="js/webshim/js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
</head>
<body>
<div id="text">
<div id="ribbon">
<ul>
<li><a href="http://www.cpcc.edu">CPCC</a></li>
<li><a href="http://www.cpcc.edu/cce">Corporate & Continuing Education</a></li>
<li><a href="http://tix.cpcc.edu">CPCC Tix</a></li>
<li><a href="http://cpccfoundation.com/">CPCC Foundation</a></li>
<li class="accessibility"><a href="http://www.cpcc.edu/services/accessibility">Accessibility</a></li>
<li class="need-help"><a href="http://www.cpcc.edu/services/need-help">Need Help
<img alt="Need Help?" src="http://www.cpcc.edu/++resource++theme.www.images/help_icon.png"></a></li>
</ul>
</div>
<div id="header-inner">
<div id="logo"><img src="http://www.cpcc.edu/++resource++theme.www.images/logo.png" alt="CPCC Logo"></div>
<div class="clear"></div>
</div>
<div class="LSResult" id="LSResult" style="">
<div class="LSShadow" id="LSShadow"></div>
</div>
<div id="menu">
<ul id="site-navigation">
<li id="portaltab-about" class="plain"><a href="http://www.cpcc.edu/about" title="">
About CPCC</a></li>
<li id="portaltab-learning" class="plain"><a href="http://www.cpcc.edu/academics" title="">Academics</a>
</li>
<li id="portaltab-studentservices" class="plain"><a href="http://www.cpcc.edu/services" title="">Student
Services</a></li>
<li id="portaltab-artscommunity" class="plain"><a href="http://www.cpcc.edu/artscommunity" title="">Arts
& Community</a></li>
<li id="portaltab-careerhub" class="plain"><a href="http://www.cpcc.edu/careerhub" title="">Career Hub</a>
</li>
</ul>
</div><!-- end menu -->
<noscript>
<h1 class="noScriptMessage"><b>We're sorry - You must have JavaScript enabled to use Rateschedule.</b></h1>
<h3 class="noScriptMessage">Please enable JavaScript on your browser.</h3>
</noscript>
<!-- Form data, all data is required, once submit is clicked, form will be validated and emcumbrance will be calculated. -->
<form id="calculation_form" name="calculation_form" method="post">
<h1>Rate Schedule Calculator</h1>
<fieldset>
<legend>Employee Information</legend>
<div class="help-info">
<strong>Note:</strong> Non-Exempt employees will submit and be paid from timesheets. Instructors will submit and be paid from contact hour reports.
</div>
<dl>
<dt><label for="empId">Employee ID:</label></dt>
<dd><input type="text" id="empId" pattern="[0-9]{7}" placeholder="Employee ID" value="" required />
</dd>
<dt><label for="fName">First Name:</label></dt>
<dd><input type="text" id="fName" required placeholder="First Name" value="" /></dd>
<dt><label for="lName">Last Name</label></dt>
<dd><input type="text" id="lName" required placeholder="Last Name" value="" /></dd>
<dt><label for="posNum">Position Number</label></dt>
<dd><input type="text" id="posNum" required placeholder="Position Number" value="" /></dd>
<dt><label for="posTitle">Position Title</label></dt>
<dd><input type="text" id="posTitle" required placeholder="Position Title" value="" /></dd>
<dt><label for="empType">Employee Type</label></dt>
<dd><select id="empType" name="empType">
<option value="" selected>Select Employee Type:</option>
<option value="Hourly Pay Rate (Non Exempt Employees)">Hourly Pay Rate (Non Exempt Employees)
</option>
<option value="Contact Hour Pay Rate (Exempt Instructors)">Contact Hour Pay Rate (Exempt
Instructors)
</option>
</select></dd>
<dt><label for="sDate">Start date</label></dt>
<dd><input type="date" id="sDate" required/></dd>
<dt><label for="cDate">End date</label></dt>
<dd><input type="date" id="cDate" required/></dd>
</dl>
</fieldset>
<fieldset>
<legend>Budgeting Worksheet</legend>
<div class="help-info">
<strong>Important:</strong> Be aware that submitting a rate sheet beyond the bounds of the current fiscal year will encumber funds for the following year.
</div>
<dl>
<dt><label for="glAcct">GL Account:</label></dt>
<dd><input type="text" id="glAcct" required placeholder="GL Account" value=""/></dd>
<dt><label for="rate">Hourly rate:</label></dt>
<dd><input type="number" id="rate" required placeholder="Hourly rate" value=""/></dd>
<dt><label for="hours">Estimated Monthly Hours:</label></dt>
<dd><input type="number" id="hours" required placeholder="Monthly Hours" value=""/></dd>
<dd><input type="hidden" id="comp" value=""/></dd>
</dl>
</fieldset>
<fieldset>
<legend>Supervisor Information</legend>
<div class="help-info">
Please enter the information for the supervisor of the position described in this Rate Schedule.
</div>
<dl>
<dt><label for="supervisor">Supervisor Name:</label></dt>
<dd><input type="text" id="supervisor" required placeholder="Supervisor Name" value=""/></dd>
<dt><label for="phone">Phone Extension:</label></dt>
<dd><input type="text" id="phone" pattern="[0-9]{4}" required placeholder="Phone Extension" value=""/>
</dd>
</dl>
</fieldset>
</form>
<p>
<button class="button" id="submit" value="submit">Calculate</button>
<button class="button" id="reset">Reset</button>
</p>
<div class="clear"></div>
<div id="footer">
<ul id="footer-navigation">
<li><a href="http://www.cpcc.edu/humanresources/employment">
<img src="http://www.cpcc.edu/++resource++theme.www.images/briefcase_icon.png"
alt="Jobs at CPCC"></a><br>
<a href="http://www.cpcc.edu/humanresources/employment">Jobs at CPCC</a></li>
<li><a href="http://www.cpcc.edu/attending/catalog">
<img src="http://www.cpcc.edu/++resource++theme.www.images/catalog_icon.png"
alt="College Catalog"></a><br>
<a href="http://www.cpcc.edu/attending/catalog">College Catalog</a></li>
<li><a href="http://www.cpcc.edu/college-safety">
<img src="http://www.cpcc.edu/++resource++theme.www.images/icon_college_safety.png"
alt="College Safety"></a><br>
<a href="http://www.cpcc.edu/college-safety">Safety</a></li>
<li><a href="http://www.cpcc.edu/site-map">
<img src="http://www.cpcc.edu/++resource++theme.www.images/sitemap_icon.png" alt="Site Map"></a><br>
<a href="http://www.cpcc.edu/site-map">Site Map</a></li>
<li><a href="http://inside.cpcc.edu/">
<img src="http://www.cpcc.edu/++resource++theme.www.images/employee_icon.png"
alt="Employee Intranet"></a><br>
<a href="http://inside.cpcc.edu/">Employee Intranet</a></li>
<li><a href="http://www.cpcc.edu/services/online-services">
<img id="tester" src="http://www.cpcc.edu/++resource++theme.www.images/globe_icon.png"
alt="Online Services"></a><br>
<a href="http://www.cpcc.edu/services/online-services">Online Services</a></li>
<li class="last">
<a href="http://www.cpcc.edu/contact-us">
<img src="http://www.cpcc.edu/++resource++theme.www.images/contact_icon.png"
alt="Contact Us"></a><br>
<a href="http://www.cpcc.edu/contact-us">Contact Us</a></li>
</ul>
<div class="clear"></div>
<div id="footer-links"><a href="http://www.cpcc.edu/browsers/supported-browsers">Supported Browsers</a> /
<a href="http://www.cpcc.edu/services/accessibility">Accessibility</a><br>Central Piedmont Community College
</div>
</div>
</div>
<!-- Below is the format for the printable form. Again Handlebars is used to update the page. -->
<div id="printable">
<div class="header-inner">
<div class="logo">
<img src="http://www.cpcc.edu/++resource++theme.www.images/logo.png" alt="CPCC Logo"/>
</div>
<div class="clear"></div>
</div>
<h3>Rate Schedule</h3>
<div class="help-employee-info">
<p>Note: Non-Exempt employees will submit and be paid from timesheets.
<br>Instructors will submit and be paid from contact hour reports.
</p>
</div>
<h3> Employee Information</h3>
<dl class="data">
<dt>Employee ID:</dt>
<dd>{{empId}}</dd>
<dt>First name:</dt>
<dd>{{fName}}</dd>
<dt>Last name:</dt>
<dd>{{lName}}</dd>
<dt>Position number:</dt>
<dd>{{posNum}}</dd>
<dt>Position title:</dt>
<dd>{{posTitle}}</dd>
<dt>Employee Type:</dt>
<dd>{{empType}}</dd>
</dl>
<h3>Budgeting Worksheet</h3>
<dl class="data">
<dt>GL Account:</dt>
<dd>{{glAcct}}</dd>
<dt>Start date:</dt>
<dd>{{sDate}}</dd>
<dt>End date:</dt>
<dd>{{cDate}}</dd>
<dt>Hourly rate:</dt>
<dd>{{rate}}</dd>
<dt>Estimated Monthly Hours:</dt>
<dd>{{hours}}</dd>
</dl>
<h3>Calculated Values</h3>
<dl class="data">
<dt>Estimated Encumbrance for Current Fiscal Year:</dt>
<dd>{{comp}}</dd>
</dl>
<div>
<h3>Authorization:</h3>
<div class="signature-box"></div>
<div id="supervisor-print">
<span>{{supervisor}}</span>
<span>Phone Extension: {{phone}}</span>
<span>Date</span>
</div>
<div class="help-employee-info">
<p>Please sign, date and submit to Human Resources.</p>
</div>
</div>
</div>
<script src="calculateHireCost.js">
</script>
</body>
</html>
Javascript file: calculateHireCost.js
// This program will calculate the cost of hiring personal for the dates, rate, and hours specified. The program will
// also retain values for a print friendly page once the calculate/submit button is pressed. Handlebars is used to
// update the page with the printable version of the information.
// Run fuction validateForm when the submit button is clicked. Once the form is validated, ValidateForm will call the
// function process_form. The only validation is that a field is required and end date is greater than start date.
// Run function reset_form when reset button is clicked.
$("#submit").bind( "click", function() { validateForm() });
$("#reset").bind( "click", function() { reset_form() });
var source = $("#printable").html();
var template = Handlebars.compile(source);
$(document).ready(function()
{
$('#sDate').val("");
$('#cDate').val("");
initialize_dates();
})
// Validate fields to confirm no null values. If field is blank or null, return alert message requesting input from
// the user. If all fields are valid, run process_form.
function validateForm() {
var empId = document.forms["calculation_form"]["empId"].value;
var fName = document.forms["calculation_form"]["fName"].value;
var lName = document.forms["calculation_form"]["lName"].value;
var posNum = document.forms["calculation_form"]["posNum"].value;
var posTitle = document.forms["calculation_form"]["posTitle"].value;
var empType = document.forms["calculation_form"]["empType"].value;
var sDate = document.forms["calculation_form"]["sDate"].value;
var cDate = document.forms["calculation_form"]["cDate"].value;
var glAcct = document.forms["calculation_form"]["glAcct"].value;
var rate = document.forms["calculation_form"]["rate"].value;
var hours = document.forms["calculation_form"]["hours"].value;
var supervisor = document.forms["calculation_form"]["supervisor"].value;
var phone = document.forms["calculation_form"]["phone"].value;
if (empId == null || empId == "") {
alert("Employee Id must be entered");
return false;
}
if (fName == null || fName == "") {
alert("First name must be entered");
return false;
}
if (lName == null || lName == "") {
alert("Last name must be entered");
return false;
}
if (posNum == null || posNum == "") {
alert("Position number must be entered");
return false;
}
if (posTitle == null || posTitle == "") {
alert("Position title must be entered");
return false;
}
if (empType == null || empType == "") {
alert("Employee Type must be entered");
return false;
}
if (sDate == null || sDate == "") {
alert("A start date must be selected");
return false;
}
if (cDate == null || cDate == "") {
alert("An end date must be selected");
return false;
}
if (glAcct == null || glAcct == "") {
alert("GL Account must be entered");
return false;
}
if (rate == null || rate == "") {
alert("An hourly rate must be entered");
return false;
}
if (hours == null || hours == "") {
alert("The estimated monthly hours must be entered");
return false;
}
if (supervisor == null || supervisor == "") {
alert("Supervisor's name must be entered");
return false;
}
if (phone == null || phone == "") {
alert("Phone extension must be filled out");
return false;
}
process_form();
}
// process_form will save entered and calculated values to be re-displayed in a print friendly form
// on the page. This function will call the calculate function to calculate the Yearly Emcumbrance.
function process_form()
{
var empId = $("#empId").val();
var fName = $("#fName").val();
var lName = $("#lName").val();
var posNum = $("#posNum").val();
var posTitle = $("#posTitle").val();
var empType = $("#empType").val();
var glAcct = $("#glAcct").val();
var sDate = $("#sDate").val();
var cDate = $("#cDate").val();
var rate = $("#rate").val();
var hours = $("#hours").val();
var supervisor = $("#supervisor").val();
var phone = $("#phone").val();
console.log(sDate);
console.log(cDate);
console.log(hours);
console.log(rate);
// verify end date is greater than start date.
if (sDate < cDate)
{
// store compensation
$("#comp").val(calculate(sDate, cDate));
var comp = $("#comp").val();
// data variable will be used by handlebars to create printable version of page.
var data = {
'empId': empId,
'fName': fName,
'lName': lName,
'posNum': posNum,
'posTitle': posTitle,
'empType': empType,
'glAcct': glAcct,
'sDate': sDate,
'cDate': cDate,
'rate': rate,
'hours': hours,
'comp': comp,
'supervisor': supervisor,
'phone': phone,
}
console.log(sDate);
console.log(cDate);
console.log(hours);
console.log(rate);
// replace div id=="text" with printable version of "data".
document.getElementById('text').innerHTML = template(data);
}
else
{
alert('End date must be later than start date. Please adjust dates.');
}
}
// This function will calculate the yearly encumbrance. The number of hours x rate x months. The months between
// function will determine the number of months.
function calculate(sDate,cDate)
{
// convert date string to date
var newdate1 = new Date(sDate);
var newdate2 = new Date(cDate);
newdate1.setDate(newdate1.getDate() + 2);
newdate2.setDate(newdate2.getDate() + 2);
var dd1 = newdate1.getDate();
var mm1 = newdate1.getMonth() + 1;
var y1 = newdate1.getFullYear();
var dd2 = newdate2.getDate();
var mm2 = newdate2.getMonth() + 1;
var y2 = newdate2.getFullYear();
var date1 = mm1 + '-' + dd1 + '-' + y1;
var date2 = mm2 + '-' + dd2 + '-' + y2;
var date1 = new Date(date1);
var date2 = new Date(date2);
date1 = moment(date1).format('YYYY-MM-DD');
date2 = moment(date2).format('YYYY-MM-DD');
var rate = $("#rate").val();
var hours = $("#hours").val();
console.log(date1);
console.log(date2);
// retrieve number of months
var months = monthsBetween(date1, date2);
console.log(months);
// calculate total hours and compensation
var comp = rate * hours * months;
console.log(comp);
return comp;
}
// This function calculates the number of months between the two dates. Partial months will be counted as
// a whole month. If the end date is 8/1/20xx, then August will count as one month. Since this is for
// yearly budgeting, the number of months have a max of 12. If a two year period is entered, it will be
// reduced from 24 to 12 months.
function monthsBetween(date1, date2)
{
date1 = new Date(date1);
date2 = new Date(date2);
var date1Month = date1.getMonth();
var date2Month = date2.getMonth();
var date1Year = date1.getFullYear();
var date2Year = date2.getFullYear();
var date2Date = date2.getDate();
var months = 0;
if (date1 < date2) {
var i = new Date(date1);
while ((i <= date2) && (months < 12)) {
if (date1Month == 11) {
months++;
date1Year++;
date1Month = 00;
i.setDate(01);
i.setFullYear(date1Year);
i.setMonth(00);
}
else {
months++;
date1Month++;
i.setDate(01);
i.setMonth(date1Month);
}
}
}
else
{
alert('End date must be later than start date. Please adjust dates.');
}
if (months == 0)
{
months = 1;
}
if (date2Date == 01)
{
months++;
}
if (months > 12)
{
months = 12;
}
return months;
}
function reset_form()
{
$("#empId").val("");
$("#fName").val("");
$("#lName").val("");
$("#posNum").val("");
$("#posTitle").val("");
$("#empType").val("");
$("#glAcct").val("");
$("#sDate").val("");
$("#cDate").val("");
$("#rate").val(0);
$("#hours").val(0);
$("#comp").val(0);
$("#supervisor").val("");
$("#phone").val("");
initialize_dates();
}
function set_end_date_per_start_date(mode) {
//
// Seed the end date based on the start date's month. If after May, push
// the end date's year out to next year.
//
if (mode == 'initial')
{
startDate = new Date();
console.log(startDate);
}
else
{
currentStartDate = $("#sDate").val();
console.log(currentStartDate);
parts = currentStartDate.value.split("/");
startDate = new Date(parseInt(parts[2]),(parseInt(parts[0])),parseInt(parts[1]));
console.log(startDate);
}
if (startDate.getMonth() > 4)
{
console.log(startDate);
endDate = new Date((startDate.getFullYear() + 1), 4, 31);
console.log(endDate);
}
else
{
endDate = new Date(startDate.getFullYear(), 4, 31);
console.log(endDate);
}
console.log(startDate.getMonth());
console.log(startDate.getDate());
startDateString = moment(startDate).format('YYYY-MM-DD');
$("#sDate").val(startDateString);
console.log($("#sDate").val());
console.log(startDate.getMonth());
console.log(startDate.getDate());
console.log(endDate.getMonth());
console.log(endDate.getDate());
endDateString = moment(endDate).format('YYYY-MM-DD');
$("#cDate").val(endDateString);
console.log($("#cDate").val());
console.log(endDate.getMonth());
console.log(endDate.getDate());
}
function initialize_dates() {
//
// Seed with today's date.
//
set_end_date_per_start_date('initial');
}