normbry
asked on
A validation script with a difference...
Hello,
Below is a form that looks a lot worse than it is. I would like to validate this form, but with a difference....
Is it possible to have the script ignore the usual e-mail validation _after_ the user has already made one attempt to send in the form without properly writing (or merely forgetting) his/her e-mail address? I'm referring to users who haven't got their e-mail configured or for whatever reason simply don't want to include their email (and don't realize the script is looking for a particular format, not just gibberish).
However, the first time around the validation should kick in on all required fields (including e-mail).
Is this possible?
More points coming your way if we can get this ball rolling.
Thanks much,
Norman
The form:
<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp" onSubmit="return verify(this.form)">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="Inschrijfformulier"
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.wedstrijd-0889.demon.nl/ogc/confirm.html">
<TABLE BORDER="0"><TR><TD><TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Uw gegevens</CAPTION><TR><Td>
<INPUT type="radio" name="Sexe" value="male">
<LABEL FOR="male">Man</LABEL>
<INPUT type="radio" name="Sexe" value="female">
<LABEL FOR="female">Vrouw</LABEL>
</Td></TR><TR><Td>2)</Td><
<td><INPUT TYPE="text" name="email" SIZE=38></Td></TR>
<TR><Td>3)</Td><Td>Achtern
<td><INPUT TYPE="text" name="achternaam" SIZE=38></Td></TR>
<TR><Td>4)</Td><Td>Voornam
<td><INPUT TYPE="text" name="voornamen" SIZE=38></Td></TR>
<TR><Td>5)</Td><Td>Straatn
<td><INPUT TYPE="text" name="adres" SIZE=38></Td></TR>
<TR><Td>6)</Td><Td>Postcod
<td><INPUT TYPE="text" name="postcode" SIZE=38></Td></TR>
<TR><Td>7)</Td><Td>Woonpla
<td><INPUT TYPE="text" name="woonplaats" SIZE=38></Td></TR>
<TR><Td>8)</Td><Td>Telefoo
<td><INPUT TYPE="Text" NAME="telefoon" SIZE=38></Td></TR>
<TR><Td>9)</Td><Td>Faxnr:<
<td><INPUT TYPE="Text" NAME="fax" SIZE=38></Td></TR>
<TR><Td>10)</Td><Td>Geboor
<td><INPUT TYPE="text" NAME="dob" SIZE=38></Td></TR>
<TR><Td>11)</Td><Td>Bank/G
<td><INPUT TYPE="text" NAME="bank" SIZE=38></Td></TR>
</TABLE><BR>
<TABLE ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Ik schrijf me in voor Mondeling:....</CAPTION><T
<TR><TD><INPUT TYPE="Checkbox" name="*"> Cursus Cafébedrijf te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" name="*"> Cursus Sociale Hygiëne te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Restaurantbedrijf te: </TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Horecaportier te:</TD><TD><input type="text" size="17" name="portier"></TD><TD>St
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Toepassing Hygiénecode te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>...en/
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Cafébedrijf te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Sociale Hygiëne te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Restaurantbedrijf te: </TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Horecaportier te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Toepassing Hygiénecode te:</TD><TD><input type="text" size="19" name="*"></TD></TR></TABLE
<TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Het cursusgeld betaal ik:</CAPTION><TR><Td COLSPAN="3">
<INPUT type="radio" name="betaal" value="cash">Contant op de eerste les.<BR>
<INPUT type="radio" name="betaal" value="termijn">In 9 termijnen via automatische incasso van mijn bank- of girorekening.<BR>
<INPUT type="radio" name="betaal" value="auto">eenmalig via automatische incasso van mijn bank- of girorekening.<BR>
<INPUT type="radio" name="betaal" value="accept">Binnen 10 dagen na ontvangst van een accept-girokaart.</Td></TR
<DIV ALIGN="CENTER"><INPUT TABINDEX="13" TYPE="SUBMIT" VALUE="Verzenden"> &n
A possible script:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.top == window) {
window.top.location = "aanmelden_fr.html";
}
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//This JS Josh's puppy
function verify()
{var form=document.theForm;
var text=" ";
var i,found;
if (form.email.value=="" || form.email.value.indexOf('
text += "1, ";
if (form.achternaam.value==""
text += "2, ";
if (form.voornamen.value=="")
text += "4, ";
if (form.adres.value=="")
text += "6, ";
if (form.postcode.value=="")
text += "7, ";
if (form.woonplaats.value==""
text += "8, ";
if (form.familie.value=="")
text += "13, ";
if (form.lid.value=="")
text += "14, ";
for (found=false, i=0; i<form.commission.length; i++)
{if (form.commission[i].checke
found=true;
}
if (!found)
text += "15, ";
for (found=false, i=0; i<form.handicap.length; i++)
{if (form.handicap[i].checked)
found=true;
}
if (!found)
text += "16, ";
for (found=false, i=0; i<form.lid_type.length; i++)
{if (form.lid_type[i].checked)
found=true;
}
if (!found)
text += "17, ";
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = '';
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = 'vraag';
if (text.length > 4 ) plur = 'vragen';
text = text.substring(0,text.leng
alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
return false;
}
}
}
// -- End -->
</SCRIPT>
Below is a form that looks a lot worse than it is. I would like to validate this form, but with a difference....
Is it possible to have the script ignore the usual e-mail validation _after_ the user has already made one attempt to send in the form without properly writing (or merely forgetting) his/her e-mail address? I'm referring to users who haven't got their e-mail configured or for whatever reason simply don't want to include their email (and don't realize the script is looking for a particular format, not just gibberish).
However, the first time around the validation should kick in on all required fields (including e-mail).
Is this possible?
More points coming your way if we can get this ball rolling.
Thanks much,
Norman
The form:
<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp" onSubmit="return verify(this.form)">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="Inschrijfformulier"
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.wedstrijd-0889.demon.nl/ogc/confirm.html">
<TABLE BORDER="0"><TR><TD><TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Uw gegevens</CAPTION><TR><Td>
<INPUT type="radio" name="Sexe" value="male">
<LABEL FOR="male">Man</LABEL>
<INPUT type="radio" name="Sexe" value="female">
<LABEL FOR="female">Vrouw</LABEL>
</Td></TR><TR><Td>2)</Td><
<td><INPUT TYPE="text" name="email" SIZE=38></Td></TR>
<TR><Td>3)</Td><Td>Achtern
<td><INPUT TYPE="text" name="achternaam" SIZE=38></Td></TR>
<TR><Td>4)</Td><Td>Voornam
<td><INPUT TYPE="text" name="voornamen" SIZE=38></Td></TR>
<TR><Td>5)</Td><Td>Straatn
<td><INPUT TYPE="text" name="adres" SIZE=38></Td></TR>
<TR><Td>6)</Td><Td>Postcod
<td><INPUT TYPE="text" name="postcode" SIZE=38></Td></TR>
<TR><Td>7)</Td><Td>Woonpla
<td><INPUT TYPE="text" name="woonplaats" SIZE=38></Td></TR>
<TR><Td>8)</Td><Td>Telefoo
<td><INPUT TYPE="Text" NAME="telefoon" SIZE=38></Td></TR>
<TR><Td>9)</Td><Td>Faxnr:<
<td><INPUT TYPE="Text" NAME="fax" SIZE=38></Td></TR>
<TR><Td>10)</Td><Td>Geboor
<td><INPUT TYPE="text" NAME="dob" SIZE=38></Td></TR>
<TR><Td>11)</Td><Td>Bank/G
<td><INPUT TYPE="text" NAME="bank" SIZE=38></Td></TR>
</TABLE><BR>
<TABLE ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Ik schrijf me in voor Mondeling:....</CAPTION><T
<TR><TD><INPUT TYPE="Checkbox" name="*"> Cursus Cafébedrijf te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" name="*"> Cursus Sociale Hygiëne te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Restaurantbedrijf te: </TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Horecaportier te:</TD><TD><input type="text" size="17" name="portier"></TD><TD>St
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Toepassing Hygiénecode te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdat
<TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>...en/
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Cafébedrijf te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Sociale Hygiëne te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Restaurantbedrijf te: </TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Cursus Horecaportier te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*"> Toepassing Hygiénecode te:</TD><TD><input type="text" size="19" name="*"></TD></TR></TABLE
<TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>Het cursusgeld betaal ik:</CAPTION><TR><Td COLSPAN="3">
<INPUT type="radio" name="betaal" value="cash">Contant op de eerste les.<BR>
<INPUT type="radio" name="betaal" value="termijn">In 9 termijnen via automatische incasso van mijn bank- of girorekening.<BR>
<INPUT type="radio" name="betaal" value="auto">eenmalig via automatische incasso van mijn bank- of girorekening.<BR>
<INPUT type="radio" name="betaal" value="accept">Binnen 10 dagen na ontvangst van een accept-girokaart.</Td></TR
<DIV ALIGN="CENTER"><INPUT TABINDEX="13" TYPE="SUBMIT" VALUE="Verzenden"> &n
A possible script:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.top == window) {
window.top.location = "aanmelden_fr.html";
}
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//This JS Josh's puppy
function verify()
{var form=document.theForm;
var text=" ";
var i,found;
if (form.email.value=="" || form.email.value.indexOf('
text += "1, ";
if (form.achternaam.value==""
text += "2, ";
if (form.voornamen.value=="")
text += "4, ";
if (form.adres.value=="")
text += "6, ";
if (form.postcode.value=="")
text += "7, ";
if (form.woonplaats.value==""
text += "8, ";
if (form.familie.value=="")
text += "13, ";
if (form.lid.value=="")
text += "14, ";
for (found=false, i=0; i<form.commission.length; i++)
{if (form.commission[i].checke
found=true;
}
if (!found)
text += "15, ";
for (found=false, i=0; i<form.handicap.length; i++)
{if (form.handicap[i].checked)
found=true;
}
if (!found)
text += "16, ";
for (found=false, i=0; i<form.lid_type.length; i++)
{if (form.lid_type[i].checked)
found=true;
}
if (!found)
text += "17, ";
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = '';
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = 'vraag';
if (text.length > 4 ) plur = 'vragen';
text = text.substring(0,text.leng
alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
return false;
}
}
}
// -- End -->
</SCRIPT>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi norman:
Change
var i,found;
if (form.email.value=="" || form.email.value.indexOf('
text += "1, ";
to
var i,found,EmailTests=0;
var Tries = 1;
if (form.email.value=="" || form.email.value.indexOf('
EmailTests++;
if (EmailTests < Tries) text += "1, ";
}
Michel
Change
var i,found;
if (form.email.value=="" || form.email.value.indexOf('
text += "1, ";
to
var i,found,EmailTests=0;
var Tries = 1;
if (form.email.value=="" || form.email.value.indexOf('
EmailTests++;
if (EmailTests < Tries) text += "1, ";
}
Michel
ASKER
Hey Michel,
Thanks for your thoughts on this. The result isn't quite what I had in mind, though. What's happening now is that the script isn't bothering with the email field from the start.
What I'd like to do is distinguish between users who have honestly forgotten to fill in their email. The script _should_ catch them out; A client's email address is too valuable to pass up. The other group, who want to send in the form but - at all cost - _without_ their email (either because they haven't got one yet or whatever)I would like for the script to grant permission to leave the email field blank. But only upon their second attempt. In other words: if they prefer not sending in the form at all, rather than fill in their email address, then - OK - I'll have the form without their email. So the script should validate the email format the first time around, but ignore a blank (or faulty) email input the second time.
Not sure if this can be done, however. Though from your code, it appears you're aware of my intentions; it's just not happening that way, not in NN or IE.
Cheers,
Norman
Thanks for your thoughts on this. The result isn't quite what I had in mind, though. What's happening now is that the script isn't bothering with the email field from the start.
What I'd like to do is distinguish between users who have honestly forgotten to fill in their email. The script _should_ catch them out; A client's email address is too valuable to pass up. The other group, who want to send in the form but - at all cost - _without_ their email (either because they haven't got one yet or whatever)I would like for the script to grant permission to leave the email field blank. But only upon their second attempt. In other words: if they prefer not sending in the form at all, rather than fill in their email address, then - OK - I'll have the form without their email. So the script should validate the email format the first time around, but ignore a blank (or faulty) email input the second time.
Not sure if this can be done, however. Though from your code, it appears you're aware of my intentions; it's just not happening that way, not in NN or IE.
Cheers,
Norman
Yes, I must be tired... The EmailTests need to be outside any function for it to be global... (late night last night...) I will test the script now...
Michel
Michel
Here. but the script needed more...
I have also changed the form tag:
<FORM.... onSubmit="return verify(this)">
and commented some non existent fields out
Submitting once gives
U heeft de volgende vragen 1,2,3....
and second time
U heeft de volgende vragen 2,....
Michel
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//This JS was Josh's puppy until mutilated
EmailTests=0;
function verify(form)
{
var text=" ";
var i,found;
var Tries = 1;
if (form.email.value=="" || form.email.value.indexOf('
if (EmailTests < Tries) text += "1, ";
EmailTests++;
alert('going ' + EmailTests + ':' + text);
}
if (form.achternaam.value==""
text += "2, ";
if (form.voornamen.value=="")
text += "4, ";
if (form.adres.value=="")
text += "6, ";
if (form.postcode.value=="")
text += "7, ";
if (form.woonplaats.value==""
text += "8, ";
/* if (form.familie.value=="")
text += "13, ";
if (form.lid.value=="")
text += "14, ";
for (found=false, i=0; i<form.commission.length; i++)
{if (form.commission[i].checke
found=true;
}
if (!found)
text += "15, ";
for (found=false, i=0; i<form.handicap.length; i++)
{if (form.handicap[i].checked)
found=true;
}
if (!found)
text += "16, ";
for (found=false, i=0; i<form.lid_type.length; i++)
{if (form.lid_type[i].checked)
found=true;
}
if (!found)
text += "17, ";
*/
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = 'vraag';
if (text.length > 4 ) plur = 'vragen';
text = text.substring(0,text.leng
alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
return false;
}
}
// -- End -->
</SCRIPT>
I have also changed the form tag:
<FORM.... onSubmit="return verify(this)">
and commented some non existent fields out
Submitting once gives
U heeft de volgende vragen 1,2,3....
and second time
U heeft de volgende vragen 2,....
Michel
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//This JS was Josh's puppy until mutilated
EmailTests=0;
function verify(form)
{
var text=" ";
var i,found;
var Tries = 1;
if (form.email.value=="" || form.email.value.indexOf('
if (EmailTests < Tries) text += "1, ";
EmailTests++;
alert('going ' + EmailTests + ':' + text);
}
if (form.achternaam.value==""
text += "2, ";
if (form.voornamen.value=="")
text += "4, ";
if (form.adres.value=="")
text += "6, ";
if (form.postcode.value=="")
text += "7, ";
if (form.woonplaats.value==""
text += "8, ";
/* if (form.familie.value=="")
text += "13, ";
if (form.lid.value=="")
text += "14, ";
for (found=false, i=0; i<form.commission.length; i++)
{if (form.commission[i].checke
found=true;
}
if (!found)
text += "15, ";
for (found=false, i=0; i<form.handicap.length; i++)
{if (form.handicap[i].checked)
found=true;
}
if (!found)
text += "16, ";
for (found=false, i=0; i<form.lid_type.length; i++)
{if (form.lid_type[i].checked)
found=true;
}
if (!found)
text += "17, ";
*/
if (text.length > 1) //if there are error messages, then alert the user and don't continue
{
var plur = 'vraag';
if (text.length > 4 ) plur = 'vragen';
text = text.substring(0,text.leng
alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
return false;
}
}
// -- End -->
</SCRIPT>
As an example:
In the form tag of your page, define a hidden field:
<form ....>
<input type="HIDDEN" Name="hidden_field" value="0">
Your javascript would resemble something like:
function verify(form)
{
var valid
if form.hidden_field.value == 0 then //first validation
{
// do all your validations
...
If valid == TRUE // validations successful first time
return TRUE
else // validations succeeded 1st time around
{
form.hidden_field.value = 1; //changes the form value
return FALSE;
}
else // not the first attempt at validation
{
//perform form validations, minus those that you only want to do the first time.
return valid;
}
hope that helps.
In the form tag of your page, define a hidden field:
<form ....>
<input type="HIDDEN" Name="hidden_field" value="0">
Your javascript would resemble something like:
function verify(form)
{
var valid
if form.hidden_field.value == 0 then //first validation
{
// do all your validations
...
If valid == TRUE // validations successful first time
return TRUE
else // validations succeeded 1st time around
{
form.hidden_field.value = 1; //changes the form value
return FALSE;
}
else // not the first attempt at validation
{
//perform form validations, minus those that you only want to do the first time.
return valid;
}
hope that helps.
ASKER
Thanks heaps Michel.
Dtseng, thanks for your input also, but Michel's adaptations are a little more usable.
Cheers,
Norman
Dtseng, thanks for your input also, but Michel's adaptations are a little more usable.
Cheers,
Norman
ASKER
Sorry Michel,
This time I'm the one who's been acutely sleep-deprived.
What shall I do, email Linda?
This time I'm the one who's been acutely sleep-deprived.
What shall I do, email Linda?
That is up to you... I have (luckily) seldom been in this situation... For forms sake perhaps so no precedent is set...
Michel
Michel
mplungjan,
See the question I posted to award you points :-)
Linda Gardner
Customer Service @ Experts Exchange
See the question I posted to award you points :-)
Linda Gardner
Customer Service @ Experts Exchange
Thanks!
Michel
Michel
ASKER