SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: form validation

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form validation

    I am creating validation for an email submission form to verify that the user has entered an email in two fields and has entered the same email twice. I am using this code:

    Code:
     <!-- form validation script -->
    <script language="JavaScript">
    <!--
    var reWhitespace = /^\s+$/;
    function isEmpty (s) { 
    //return ((s == null) || (s.length == 0) || reWhitespace.test(s));
    }
     
    function ValidateDetails() {
     
    //validates that the two email fields are filled in
    if (isEmpty(document.form1.emailAddress.value) ||
    isEmpty(document.form1.emailAddress_verify.value) {
    alert("Please provide us with your request details");
    return(false);
    }
     
    //validates that the two addresses given are the same
    if (document.form1.emailAddress.value != document.form1.emailAddress_verify.value) {
    alert("The two email addresses are not the same.");
    return (false);
    }
     
    // All conditions satisfied. Time to submit the form.
    document.form1.submit();
    }
     
    // -->
    </script>
    <!-- End form validation script -->
     
    <!-- Form -->
     
    <form name="form1" method="post" action="subscribe.php" onSubmit="ValidateDetails();return false">
     
    <input type="text" name="emailAddress" onfocus="this.value=''" value="enter@here.now" /><br />
     
    <small>Please confirm your e-mail address.</small>
     
    <input type="text" name="emailAddress_verify" onfocus="this.value=''" value="enter again@here.now" />
     
    <input type="submit" name="submit" value="Subscribe Me" />
     
    </form>
    However, the form is not validated by the JavaScript but directs the output right to the "action" script, subscribe.php. So when one enters two different email addresses, the JavaScript validation does not kick in the message "The two email addresses are not the same." Instead the subscribe.php script goes ahead and sends the message "Thankyou for signing up for our newsletter."

    Anyone know why?

    I have loaded the script on my test site at:
    http://test.kripalu.org/
    The form is at the lower left of the home page.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You were missing a paren ) after the first part of the function (the not empty thing) try this:

    Code:
    function ValidateDetails() {
     
    //validates that the two email fields are filled in
    if (isEmpty(document.form1.emailAddress.value) || isEmpty(document.form1.emailAddress_verify.value)) {
    	alert("Please provide us with your request details");
    	return false;
    	}
     
    //validates that the two addresses given are the same
    if (document.form1.emailAddress.value != document.form1.emailAddress_verify.value) {
    	alert("The two email addresses are not the same.");
    	return false;
    	}
     
    // All conditions satisfied. Time to submit the form.
    document.form1.submit();
    }
     
    // -->
    </script>
    BTW a couple of things you also had a little strange .........

    dont do this:

    return (false)

    do this:

    return false;

    and on your call to the function in your form tag do this:

    <form name="form1" method="post" action="subscribe.php" onSubmit="return ValidateDetails();">

    By using the return functionName() in the form tag you can get rid of the call to the submit() function in your javascript....

    How its work is .... the function returns true or false to the call and then the form tag returns that (yeah I know its sounds like a dupe) to the browser as to whether to submit the form or not so this is the completed code:

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
     <!-- form validation script -->
    <script language="JavaScript">
    <!--
    var reWhitespace = /^\s+$/;
    function isEmpty (s) { 
    //return ((s == null) || (s.length == 0) || reWhitespace.test(s));
    }
     
    function ValidateDetails() {
     
    //validates that the two email fields are filled in
    if (isEmpty(document.form1.emailAddress.value) || isEmpty(document.form1.emailAddress_verify.value)) {
    	alert("Please provide us with your request details");
    	return false;
    	}
     
    //validates that the two addresses given are the same
    if (document.form1.emailAddress.value != document.form1.emailAddress_verify.value) {
    	alert("The two email addresses are not the same.");
    	return false;
    	}
    }
     
    // -->
    </script>
    <!-- End form validation script -->
    </head>
    
    <body>
     
    <!-- Form -->
     
    <form name="form1" method="post" action="subscribe.php" onSubmit="return ValidateDetails();">
     
    <input type="text" name="emailAddress" onfocus="this.value=''" value="enter@here.now" /><br />
     
    <small>Please confirm your e-mail address.</small>
     
    <input type="text" name="emailAddress_verify" onfocus="this.value=''" value="enter again@here.now" />
     
    <input type="submit" name="submit" value="Subscribe Me" />
     
    </form>
    </body>
    </html>

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OH and a final note here .... you have your onfocus's set to wipe out the fields without a check ..... really annoying if they just want to click in and edit the email ....... you can do this with a simple inline check condition:

    <input type="text" name="emailAddress" onfocus="if (this.value == 'enter@here.now') this.value = '';" value="enter@here.now" /><br />

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you can set up a function to handle these and just pass the default value and the field to the function (a more generic "portable" way to do it ... this way you can reuse the function ..... like this:

    Code:
    function checkField(fieldVal, field)	{
    	if (fieldVal == field.value)	{
    		field.value = '';
    		}
    	}
    
    <input type="text" name="emailAddress" onfocus="checkField('enter@here.now', this);" value="enter@here.now" /><br />
    AND then again if you understand ternary operators (one line functions) you can do it like this:

    Code:
    function checkField(fieldVal, field)	{
    	field.value = (fieldVal == field.value) ? '' : field.value;
      }

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your many useful comments, dc dalton. I fixed the paren and the script works fine.

    Concerning your other comments, I'll give them plenty of thought. As I was not the developer of this code, I'll leave it as it is for the time being and think about the changes you suggest in the long term throughout the site.

    Concerning "wipe out the fields," current code seems to keep the contents as far as I can see.

    Perhaps you can help me understand something else about this code. What does the code at the top do?

    Code:
     var reWhitespace = /^\s+$/;
    and in
    Code:
     function isEmpty (s) { 
    return ((s == null) || (s.length == 0) || reWhitespace.test(s));
    }
    what are the items in return () ?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the return is either true or false based on what that condition returns here's it broken down:

    a.) (s == null) is the variable s (being passed to the function) null?

    b.) (s.length == 0) is the length of the variable being passed in 0 (nothing in field)

    NOw lets stop her for a second ..... the above two are grouped together (by the use of the parens) and with an OR condition so what its saying is (in plain english):

    if s is null OR the length of s is 0

    if either one of those returns true the whole condition (the two grouped together) returns true..... then

    the result of that grouped condition is then tested to the regular expression via reWhitespace.test(s) ....... so now it is saying (again in plain english)

    If the results of (the first test the null or length of zero) OR the variable s has ANY whitespace in it return true .....

    so what its testing is the input to the email field ..... its making sure something is there AND that it has NO whitespace in it (which makes sense since email addys cant have whitespace)

    The funny looking thing being used here (your first question) is a regular expression .... its a way of testing some data without having to use all sorts of silly code.. its more advanced javascript but VERY powerful stuff ..... man can they save you time and aggravation!..

    Now Im not real thrilled with the way this other programmer did this but its not my code ...... heres an example of the use of a regular expression I use when testing emails:

    // here's the regular expression telling us what is allowed in the email field

    var pattern1 = /[\w\-]+\@[\w\-]+\.\w{2,3}/;

    and here is the use (BTW, the function test checks the input variable against the regular expression.)

    if (!pattern1.test(some_variable)) {
    alert("Email addy isnt right");
    return false;
    }

    so if the variable is correct against the expression it doesnt go into the if block ...... note the use of the ! (not) operator ..... so its saying "If the variable passed to me doesnt match the regular expression .... throw the alert. If it does dont do anything...

    Ive been using it for years and even though it could be inproved I havent had the time to do it.....it has a few minor bugs but nothing that really hurts anything.

    Now whats cool about a regular expression like this it it automatically refuses an empty field or ANYTHING except this pattern :

    word - @ (at) symbol - . (period) - word

    and it does allow things like:

    joe.blow@somedomain.com.uk

    Saves a LOT of nonsensical code!


    Regular Expression are AWESOME and cut TONS of code out of your javacript!

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dc,

    Awesome reply! You must be a teacher. Many thanks and good luck in Florida.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ex - teacher, guess it shows huh? (Funny people say that about me alot - I dont see it!)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •