validation of date and set focus problem

M

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">
<!------------------------------------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;
}
}

<!------------------------------------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 ( OK ) OK = genericTest(phoneRE,"telephone
number",document.form1.phone.value);

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

<!------------------------------------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;
}
}

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="(e-mail address removed)">


</SCRIPT>
</TABLE>
<INPUT TYPE="SUBMIT" VALUE="Submit Order">
</FORM>
</BODY>
</HTML>
 
M

McKirahan

MickG said:
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.
Click to expand...

"value=" not "vale=".

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

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
 
M

McKirahan

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
Click to expand...

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=.." ?
 
F

Fred Oz

MickG said:
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">
Click to expand...

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):

<!------------------------------------GENERIC
TEST-------------------------------------------------------------->
Click to expand...

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;
}
}
Click to expand...

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-------------------------------------------------------------->
Click to expand...

/* -------- 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);
Click to expand...

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
Click to expand...

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-------------------------------------------------------------->
Click to expand...

/* -------- 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;
}
Click to expand...

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;
}
Click to expand...

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;
Click to expand...

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>
Click to expand...

An empty row?
<th>Phone</th><th><INPUT TYPE="TEXT" NAME="phone" SIZE=25
onChange='dummy=genericTest(phoneRE,"telephone
number",this.value);'></th>
Click to expand...

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>
Click to expand...

Closing tr without an opening tr.
<tr>
<th>
</tr>
Click to expand...

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>
Click to expand...

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" ;>
Click to expand...

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>
Click to expand...

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="(e-mail address removed)">


</SCRIPT>
</TABLE>
Click to expand...

These tags seem way out of place, ditch 'em.
<INPUT TYPE="SUBMIT" VALUE="Submit Order">
</FORM>
</BODY>
</HTML>
Click to expand...

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.
 
F

Fred Oz

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

Michael
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Validation 8
This form is submitting after date validation,not checking email and all,can anybody solve it? 1
This form is submitting after date validation,not checking email and all, 2
Validation problem... 1
problem with form getting submitted 8
Can anybody plz help me outof this problem in mah code 0

Members online

Total: 25 (members: 1, guests: 24)
Robots: 365

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,066
Latest member
VytoKetoReviews

Latest Threads

Top