validation of date and set focus problem

MickG

Hi,

I am trying to validate these values, this seems to work fine for the
phone number and name but I am trying to get the program to fail to
submit and set the focus on the date when 2006 is selected and
submitted.

Thanks in advance for any help.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script language="JavaScript">

function genericTest(anyRE,title,stringToTest) {
if(anyRE.test(stringToTest)) {
return true;
} else {
window.alert("The " + title +" format of:\n" + stringToTest + "\nwas
not recognised.");
return false;
}
}


function checkWhole() {
/*
if OK variable is false, skip subsequent tests so user can
correct entries one at a time in the same order as on the form
*/
OK = checkFullName(document.form1.CCName.value);
OK = checkDate(document.form1.CCEYear.value);
if ( OK ) OK = genericTest(phoneRE,"telephone
number",document.form1.phone.value);

return OK; // OK false if any ONE (or more) test fails
}


// Reject full name if less than 5 characters
function checkFullName (fn) {
if(fn.length < 5) { // reject missing or full name less than 5
characters
window.alert("The full name format:\n" + fn + "\nwas not recognised
(missing or too short).");
return false;
} else {
return true;
}
}

function checkDate(val){
if(val==2006){
window.alert("Invalid Year");

return false;
} else {
return true;
}
}

/*PHONE RE*/
phoneRE = /^(\+|\s)*\d(\d|\s)*($\s*\d(\d|\s)*$|(\d|\s)*)(\d |\s)+(x\s*\d(\d|\s)*|ext\s*\d(\d|\s)*)?$/i;
/*friendly_emailRE*/

friendly_eMailRE = /^\s*[\w\-\.]+@([a-z0-9]+\.){1,3}[a-z]{2,6}\s*$/i;

/*this e-mail address RE is COMPUTER friendly because it rejects all
spaces*/
eMailRE = /^[\w\-\.]+@([a-z0-9]+\.){1,3}[a-z]{2,6}$/i;

</script>
</head>
<BODY>
<IMG SRC="logo.gif"><BR>
<H1>Order Form</H1>
<HR>
<FORM NAME="form1" method="post"
action="https://media.paisley.ac.uk/cgi-davison/shopMail.cgi"
onSubmit="return checkWhole();">
<table border=0 ><tr>

</tr>
<th>Phone</th><th><INPUT TYPE="TEXT" NAME="phone" SIZE=25
onChange='dummy=genericTest(phoneRE,"telephone
number",this.value);'></th>
</tr>
<tr>
<th>
</tr>
<tr>
<th>CCName</th><th><INPUT TYPE="TEXT" NAME="CCName" SIZE=30
onChange='dummy=checkFullName(this.value);'></th>

<tr>
<th>Card ExpiryYear</th>
<th><select name="CCEYear" tabindex="1" ;>
<option value= "invalid" SELECTED > Select Year</option>
<option vale="2005" >2005</option>
<option vale="2006" >2006</option>
<option vale="2007" >2007</option>
<option vale="2008" >2008</option>

</select></th>
</table>

<input type="hidden" name="recipient" value="ab*@hotmail.com">
</SCRIPT>
</TABLE>
<INPUT TYPE="SUBMIT" VALUE="Submit Order">
</FORM>
</BODY>
</HTML>

Jul 23 '05 #1

Follow Post Reply

4706

McKirahan

"MickG" <mi*****@hotmail.com> wrote in message
news:1a*************************@posting.google.co m...

Hi,

I am trying to validate these values, this seems to work fine for the
phone number and name but I am trying to get the program to fail to
submit and set the focus on the date when 2006 is selected and
submitted.

Thanks in advance for any help.

"value=" not "vale=".

<option vale="2005" >2005</option>
<option vale="2006" >2006</option>
<option vale="2007" >2007</option>
<option vale="2008" >2008</option>

Jul 23 '05 #2

mickg77

thanks, sometimes you need another pair of eyes, but i'm still trying
to get the focus() working after the validation.

again, any help would be greatly appreciated

Jul 23 '05 #3

McKirahan

<mi*****@hotmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...

thanks, sometimes you need another pair of eyes, but i'm still trying
to get the focus() working after the validation.

again, any help would be greatly appreciated

Change
OK = checkDate(document.form1.CCEYear.value);
to
OK = checkDate(document.form1.CCEYear);
then change
if(val==2006) {
to
if(val.value==2006) {
val.focus();

Also, your "function checkWhole()"
doesn't fo what you say it will do; specifically,

/*
if OK variable is false, skip subsequent tests so user can
correct entries one at a time in the same order as on the form
*/

What's with all the references to:
onchange="dummy=.." ?

Jul 23 '05 #4

Fred Oz

MickG wrote:

Hi,

I am trying to validate these values, this seems to work fine for the
phone number and name but I am trying to get the program to fail to
submit and set the focus on the date when 2006 is selected and
submitted.

Thanks in advance for any help.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script language="JavaScript">
Language attribute for script elements is depreciated, use type:

<script type="text/javascript">

Do not post code with tabs. Replace all tabs with 2 or 4 spaces and
manually wrap lines at about 70 characters to prevent automatic
wrapping which introduces errors into your code.

Your code and script is riddled with errors, I'll point out a few but
not all. Run your code through a validator (there's a link to the
free w3c validator below):

<URL:http://validator.w3.org/>


This is an HTML comment and will cause an error in JavaScript.

/* --------- GENERIC TEST ---------*/
function genericTest(anyRE,title,stringToTest) {
if(anyRE.test(stringToTest)) {
return true;
} else {
window.alert("The " + title +" format of:\n" + stringToTest + "\nwas
not recognised.");
return false;
}
}
Presuming the 'if' logic is OK, it can be more simply written as:

function genericTest(anyRE,title,stringToTest) {
if( !anyRE.test(stringToTest) ) {
alert('The ' + title +' format of:\n'
+ stringToTest + '\nwas not recognised.');
return false;
}
}

There is no need to explicitly return true, that will happen anyway if
the script successfully completes.


/* -------- CHECK WHOLE -------- */

function checkWhole() {
/*
if OK variable is false, skip subsequent tests so user can
correct entries one at a time in the same order as on the form
*/
OK = checkFullName(document.form1.CCName.value);
OK = checkDate(document.form1.CCEYear.value);
If checkFullName returns false, then checkDate returns true, you will
not detect the 'invalid' date because OK will be reset to true.

Returning errors one at a time like this is very tiresome for users,
better to build a single message and write all errors to the page so
they can be fixed, but I'll leave that up to you.
if ( OK ) OK = genericTest(phoneRE,"telephone
number",document.form1.phone.value);

return OK; // OK false if any ONE (or more) test fails
All of the above can be replaced with:

if (! checkFullName(document.form1.CCName.value) {
alert("Fix full name");
return false;
}
if (! checkDate(document.form1.CCEYear.value) {
alert("Fix date");
return false;
}
if (! genericTest(phoneRE,"telephone number",
document.form1.phone.value) {
alert("Fix phone number");
return false;
}

Note that automatic wrapping breaks your code even more.
}


/* -------- CHECK FULL NAME -------- */
// Reject full name if less than 5 characters
function checkFullName (fn) {
if(fn.length < 5) { // reject missing or full name less than 5
characters
window.alert("The full name format:\n" + fn + "\nwas not recognised
(missing or too short).");
return false;
} else {
return true;
}
No need for the 'else', just return false if your test returns true
and if otherwise, the script will successfully complete and return
true.
}

function checkDate(val){
if(val==2006){
window.alert("Invalid Year");

return false;
} else {
return true;
}
Same here.
}

/*PHONE RE*/
phoneRE = /^(\+|\s)*\d(\d|\s)*($\s*\d(\d|\s)*$|(\d|\s)*)(\d |\s)+(x\s*\d(\d|\s)*|ext\s*\d(\d|\s)*)?$/i;
/*friendly_emailRE*/

friendly_eMailRE = /^\s*[\w\-\.]+@([a-z0-9]+\.){1,3}[a-z]{2,6}\s*$/i;

/*this e-mail address RE is COMPUTER friendly because it rejects all
spaces*/
eMailRE = /^[\w\-\.]+@([a-z0-9]+\.){1,3}[a-z]{2,6}$/i;

I have no idea if these RegExps work, I didn't get your page to work,
look like they are not appropriate. Search this group for better
expressions, I think some were posted recently (within the last
month).

If you are ever going to test formats, you *must* tell the user what
format you expect or they are simply guessing in the dark. I also
don't see why these have to be global variables, surely each needs to
be used just once inside a single test module?

</script>
</head>
<BODY>
<IMG SRC="logo.gif"><BR>
<H1>Order Form</H1>
<HR>
<FORM NAME="form1" method="post"
action="https://media.paisley.ac.uk/cgi-davison/shopMail.cgi"
onSubmit="return checkWhole();">
<table border=0 ><tr>

</tr>
An empty row?
<th>Phone</th><th><INPUT TYPE="TEXT" NAME="phone" SIZE=25
onChange='dummy=genericTest(phoneRE,"telephone
number",this.value);'></th>
th tags outside a row? th is meant for a header row, you've used it
like a general cell tag. Use td unless you really mean th.
</tr>
Closing tr without an opening tr.
<tr>
<th>
</tr>
No closing th? Only one cell with the above row (probably) has two
cells? No span attribute?
<tr>
<th>CCName</th><th><INPUT TYPE="TEXT" NAME="CCName" SIZE=30
onChange='dummy=checkFullName(this.value);'></th>
You assign the return value of checkFullName to the global
variable 'dummy'; but don't use dummy anywhere. If there is no need
for dummy, why not:

<td>CCName</td>
<td><INPUT TYPE="TEXT" NAME="CCName" SIZE="30" onChange="
checkFullName(this.value);
">
</td>

Doing validation 'onchange' is not nice as nothing happens until the
user clicks on the next input (i.e. the 'changed' input loses focus).
They've moved on, but the validation drags them back to an input they
thought they'd completed.

Not only that, but they get trapped in an endless loop of alerts
until they enter a valid value - and you don't even give a hint as to
what that might be. Their only other recourse is to kill the
browser.

Better to just do validation on submit.

<tr>
<th>Card ExpiryYear</th>
<th><select name="CCEYear" tabindex="1" ;>
The semi-colon at the end is redundant, it probably wont cause an
error but it isn't needed.
<option value= "invalid" SELECTED > Select Year</option>
<option vale="2005" >2005</option>
<option vale="2006" >2006</option>
<option vale="2007" >2007</option>
<option vale="2008" >2008</option>

</select></th>

More invalid script - no closing tr? Your 'vale' error has already
been pointed out. If the value and the text are the same, just use
the text as the value will be the text (or so the spec claims and
unless testing proves otherwise).

</table>

<input type="hidden" name="recipient" value="ab*@hotmail.com">
</SCRIPT>
</TABLE>
These tags seem way out of place, ditch 'em.
<INPUT TYPE="SUBMIT" VALUE="Submit Order">
</FORM>
</BODY>
</HTML>

To get the focus back on your 'CCEYear' form element:

if (document.form1.CCEYear.blur()) {
document.form1.CCEYear.blur();
}

That is not the full extent of your errors, but I don't have time to
find or fix them all.

I suggest you start by including one input and one script and get
that working, then build up slowly until it all works and validates.
--
Fred

Jul 23 '05 #5

mickg77

thanks for the help, I'll get to it.

Michael

Jul 23 '05 #6

Fred Oz

mi*****@hotmail.com wrote:

thanks for the help, I'll get to it.

Michael

Here is a head start - I missled you on the return true thing. If
you don't sepecify a value, functions that complete return
'undefined', which is not false (duh!) unless you specify otherwise.
The script below provides a skeleton to get going, use what you like.

Lightly commented, tested in Safari and Firefox on Mac OS X.

<HTML>
<head><title>stuff</title></head>
<BODY>

<script type="text/javascript">
function validateForm(f){
var ph = f.phone.value;
var ccn = f.CCName.value;
var yr = f.CCEYear.value;
var msg = [];
var t;

// Test phone number
// Format is 8 digits
if ( (t=testPH(ph)) && 'undefined' != typeof t ) {
msg.push(t);
}

// Test credit card name
// Must be more than 5 characters without spaces
if ( (t=testCCN(ccn)) && 'undefined' != typeof t) {
msg.push(t);
}

// Test year
// must not be 2006 or not a number (see note below)
if ( (t=testYR(yr)) && 'undefined' != typeof t) {
msg.push(t);
}

// If we got any errors, write them & return false
if ( 0 != msg.length ){
writeMsg(msg.join('<br>'));
return false;
}
}

function testPH(p) {
// remove spaces, check if 8 digits and 8 long
// you may want a different test here
p = p.replace(/\s*/g,'');
if (!/\d{8}/.test(p) || 8 != p.length ) {
return '<b>Phone number must be 8 digits</b>';
}
}

function testCCN(c) {
// remove spaces, check if 5 characters of any kind
// you may want a better test here
var x = c.replace(/\s*/g,'');
if (x.length < 5) {
return '<b>Name must be at least 5 characters,'
+' not counting the spaces</b>';
}
}
function testYR(y) {
// check if y is 2006 or not a number
// Note: only use isNaN here because value is from conrolled list
// Otherwise more robust validation is required.
if ( 2006 == y || isNaN(y) ) {
return '<b>Year can\'t be ' + y + '</b>'
}
}

function checkForm(f) {
// Run validate from a button rather than onclick
if ('undefined' == typeof validateForm(f)){
var txt = 'Values are all OK';
writeMsg(txt)
}
}

function clearErr(f){
// Just clears error messages
writeMsg('');
}

function writeMsg(m){
// Generic write function. If getElementById not supported,
// Presents error in an alert after repalcing <br> with \n
// and removing all other markup
if (document.getElementById) {
document.getElementById('eSpan').innerHTML = m;
} else {
alert(m.replace(/<br>/g,'\n').replace(/<[^<>]*>/ig,''));
}
}

</script>
<H1>Order Form</H1>
<HR>
<FORM NAME="form1" action="" onSubmit="return validateForm(this);
return false;">
<table border="0">
<tr>
<td>Phone</td>
<td>
<INPUT TYPE="TEXT" NAME="phone" SIZE="25"
value="1234 5678"><br>
<i>nnnn nnnn</i>
</td>
</tr>
<tr>
<td>CCName</td>
<td>
<INPUT TYPE="TEXT" NAME="CCName" SIZE="30"
value="asdfasdf"><br>
<i>Must be more than 5 characters</i>
</td>
</tr>
<tr>
<td>Card ExpiryYear</td>
<td>
<select name="CCEYear">
<option SELECTED value="default">Select Year</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
</select>
</td>
</tr>
</table>
<INPUT TYPE="button" VALUE="check form"
onclick="checkForm(this.form);">
<INPUT TYPE="reset" onclick="clearErr(this.form);
this.form.reset();">
<INPUT TYPE="SUBMIT" VALUE="Submit Order">
</FORM>
<span id="eSpan"></span>
</BODY>
</HTML>
--
Fred

Jul 23 '05 #7

validation of date and set focus problem

This discussion thread is closed

Similar topics