Solved

A validation script with a difference...

Posted on 1998-11-05
12
197 Views
Last Modified: 2008-03-17
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>1)</Td><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><Td>(S.v.p. aanstippen wat van toepassing is)
</Td></TR><TR><Td>2)</Td><Td>Uw Email:</Td>
<td><INPUT TYPE="text" name="email" SIZE=38></Td></TR>
<TR><Td>3)</Td><Td>Achternaam:</Td>
<td><INPUT TYPE="text" name="achternaam" SIZE=38></Td></TR>
<TR><Td>4)</Td><Td>Voornamen:</Td>
<td><INPUT TYPE="text" name="voornamen" SIZE=38></Td></TR>
<TR><Td>5)</Td><Td>Straatnaam/nummer:</Td>
<td><INPUT TYPE="text" name="adres" SIZE=38></Td></TR>
<TR><Td>6)</Td><Td>Postcode:</Td>
<td><INPUT TYPE="text" name="postcode" SIZE=38></Td></TR>
<TR><Td>7)</Td><Td>Woonplaats:</Td>
<td><INPUT TYPE="text" name="woonplaats" SIZE=38></Td></TR>
<TR><Td>8)</Td><Td>Telefoonnr.:</Td>
<td><INPUT TYPE="Text" NAME="telefoon" SIZE=38></Td></TR>
<TR><Td>9)</Td><Td>Faxnr:</Td>
<td><INPUT TYPE="Text" NAME="fax" SIZE=38></Td></TR>
<TR><Td>10)</Td><Td>Geboortedatum:</Td>
<td><INPUT TYPE="text" NAME="dob" SIZE=38></Td></TR>
<TR><Td>11)</Td><Td>Bank/Gironummer:</Td>
<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><TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus AOV/hov te:</TD><TD><INPUT TYPE="text" name="*" SIZE="17"></TD><TD>Startdatum:</TD><TD><INPUT TYPE="text" name="*" SIZE="10"></Td></TR>
<TR><TD><INPUT TYPE="Checkbox" name="*">&nbsp;Cursus Caf&eacute;bedrijf te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdatum:</TD><TD><INPUT TYPE="text" name="*" SIZE="10"></Td></TR>
<TR><TD><INPUT TYPE="Checkbox" name="*">&nbsp;Cursus Sociale Hygi&euml;ne te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdatum:</TD><TD><input type="text" size="10" name="*"></Td></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Restaurantbedrijf te:&nbsp;</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdatum:</TD><TD><input type="text" size="10" name="*"></Td></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Horecaportier te:</TD><TD><input type="text" size="17" name="portier"></TD><TD>Startdatum:</TD><TD><input type="text" size="10" name="*"></Td></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Toepassing Hygi&eacute;necode te:</TD><TD><input type="text" size="17" name="*"></TD><TD>Startdatum:</TD><TD><input type="text" size="10" name="*"></TD></TR></TABLE><BR>




<TABLE CELLPADDING="3" ALIGN="CENTER" BORDERCOLOR="#000000" RULES="NONE" BGCOLOR="#e0e0c2" CLASS="kopij" CELLSPACING="0" BORDER="1"><CAPTION>...en/of ik schrijf me in voor Schriftelijk:</CAPTION><TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus AOV/hov te:</TD><TD><INPUT TYPE="text" name="*" SIZE="19"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Caf&eacute;bedrijf te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Sociale Hygi&euml;ne te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Restaurantbedrijf te:&nbsp;</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Cursus Horecaportier te:</TD><TD><input type="text" size="19" name="*"></TD></TR>
<TR><TD><INPUT TYPE="Checkbox" NAME="*">&nbsp;Toepassing Hygi&eacute;necode te:</TD><TD><input type="text" size="19" name="*"></TD></TR></TABLE><BR>

<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></TABLE><BR>

<DIV ALIGN="CENTER"><INPUT TABINDEX="13" TYPE="SUBMIT" VALUE="Verzenden">&nbsp;&nbsp;<INPUT type="reset" VALUE="Wissen"></DIV></TD></TR></TABLE></FORM>

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('@')==-1 || form.email.value.indexOf('.')==-1)
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].checked)
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.length-1); // Strip any trailing comma
alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
return false;  
}  
}
}
// -- End -->
</SCRIPT>
0
Comment
Question by:normbry
  • 5
  • 4
  • 2
  • +1
12 Comments
 

Accepted Solution

by:
dtseng earned 70 total points
ID: 1273659
you could define a hidden fieldin the form with a default value (ie 0) and have the javascript check it and update it.

if form.hidden_field.value == 0 then
     //validate field
     form.hidden_field.value = 1
else
     //submit form


0
 

Author Comment

by:normbry
ID: 1273660
Could you elaborate a tad?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1273661
Hi norman:

Change
var i,found;
    if (form.email.value=="" || form.email.value.indexOf('@')==-1 || form.email.value.indexOf('.')==-1)
    text += "1, ";

to

var i,found,EmailTests=0;
var Tries = 1;
if (form.email.value=="" || form.email.value.indexOf('@')==-1 || form.email.value.indexOf('.')==-1) {
   EmailTests++;
    if (EmailTests < Tries) text += "1, ";
}

Michel
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

Author Comment

by:normbry
ID: 1273662
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1273663
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1273664
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('@')==-1 || form.email.value.indexOf('.')==-1) {
           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].checked)
    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.length-1); // Strip any trailing comma
    alert('U heeft de volgende ' + plur + ' niet/onjuist ingevuld:\n' + text);
    return false;  
    }
    }
    // -- End -->
    </SCRIPT>
0
 

Expert Comment

by:dtseng
ID: 1273665
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.


0
 

Author Comment

by:normbry
ID: 1273666
Thanks heaps Michel.

Dtseng, thanks for your input also, but Michel's adaptations are a little more usable.

Cheers,

Norman
0
 

Author Comment

by:normbry
ID: 1273667
Sorry Michel,

This time I'm the one who's been acutely sleep-deprived.

What shall I do, email Linda?




0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1273668
That is up to you... I have (luckily) seldom been in this situation... For forms sake perhaps so no precedent is set...

Michel

0
 
LVL 7

Expert Comment

by:linda101698
ID: 1273669
mplungjan,

See the question I posted to award you points :-)

Linda Gardner
Customer Service @ Experts Exchange
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1273670
Thanks!

Michel
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question