The reason the error message only stays for a mere second is because of the way you have hooked into the form's onsubmit event handler. After the user submits their entries, then if your code detects an error in those entries, the onsubmit event must be explicitly canceled by your code to give the user an opportunity to correct their mistake.
On Saturday, September 20, 2014 6:01:16 PM UTC-4, Patrick Wong wrote:
-- The best way to to do this to change your form tag like this:
<form action="" id="frmReg" novalidate onsubmit="return process();">
And eliminate this line:
document.getElementById('frmReg').onsubmit = process;
Finally, change the process() function like this:
function process() {
'use strict';
var dob; // retrieve dob value from HTML
var msg; // output error message
var dobDate; // convert dob to date type
dob = document.getElementById('dob');
msg = '';
if (dob && dob.value) {
dobDate = new Date(dob.value);
if (dobDate.getTime()) {
}
else // invalid date or invalid input
{
msg = 'Invalid date!';
setText('errMsg', msg);
return false; // Added by Jal to cancel submit
}
} // end if
return true; // Added by Jal
} // end process()
The above changes will cancel the submission event if the date is missing or not valid.
Also, you should test this code on all the browsers you expect to support.
Good luck.
On Saturday, September 20, 2014 6:01:16 PM UTC-4, Patrick Wong wrote:
Hello,I'm creating a registration page that, among other things, displays an error message when an invalid date is entered. The JavaScript I wrote detects the error and displays the error message -- for less than one (1) second -- then the entire page refreshes to display a blank registration page. Why does it do that and how can I get it to stop refreshing?JavaScript Code:
{
'use strict';
if ((typeof elementId == 'string') && (typeof message == 'string'))
{
var output = document.getElementById(elementId );
if (output.textContent !== undefined)
{
output.textContent = message;
}
else // using IE
{
output.innerText = message;
}
}
}
function process()
{
'use strict';
var dob; // retrieve dob value from HTML
var msg; // output error message
var dobDate; // convert dob to date type
dob = document.getElementById('dob');
msg = '';
if (dob && dob.value)
{
dobDate = new Date(dob.value);
if (dobDate.getTime())
{
}
else // invalid date or invalid input
{
msg = 'Invalid date!';
setText('errMsg', msg);
}
} // end if
} // end process()
function init()
{
'use strict';
document.getElementById('frmReg' ).onsubmit = process;
}
window.onload = init;Web Code:
<html>
<head>
<meta charset="utf-8" />
<title>Registration Page</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/ "></script>html5.js
<![endif]-->
<link rel="stylesheet" href="css/mainstyle.css" />
</head>
<body>
<!-- registration page -->
<h1>Register Your Child</h1>
<p>This page allows you to enter your child's information in relation to the Two Hands preschool. </p>
<form action="" id="frmReg" novalidate>
<fieldset>
<legend class="fsheader">Identification </legend>
<p>Enter name and date of birth of the child that will be enrolling in the upcoming year. </p>
<div>
<label for="firstName">First Name: </label><input type="text" name="firstName" id="firstName" required />
</div>
<div>
<label for="lastName">Last Name: </label><input type="text" name="lastName" id="lastName" required />
</div>
<div>
<label for="dob">Birth Date: </label><input type="text" name="dob" id="dob" placeholder="mm/dd/yyyy" required /> <span id="errMsg"></span>
</div>
</fieldset>
<fieldset>
<legend class="fsheader">Placement</legend>
<div>
<h2><label for="daysAttend">Days Attending: </label></h2>
<p>Which days will the child be attending preschool? </p>
<p>
<input type="checkbox" name="monday" id="monday" value="monday" />Monday <br />
<input type="checkbox" name="tuesday" id="tuesday" value="tuesday" />Tuesday <br />
<input type="checkbox" name="wednesday" id="wednesday" value="wednesday" />Wednesday <br />
<input type="checkbox" name="thursday" id="thursday" value="thursday" />Thursday <br />
<input type="checkbox" name="friday" id="friday" value="friday" />Friday <br />
</p>
</div>
<div>
<h2><label for="sched">Schedule Type: </label></h2>
<p>Which portion of the day will the child be attending? </p>
<select name="sched" id="sched">
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="FullDay">Both Morning and Afternoon</option>
</select>
</div>
<div>
<p />
<label for="register"></label><input type="submit" value="Register" id="submit" />
</div>
</fieldset>
</form>
<script src="js/reg.js"></script>
</body>
</html>Thanks,Patrick WongNewbie Web Developer"On a clear disk, you can seek forever..."
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
