Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with form validation using regular expression and test method

    This is my first post here and my first week learning Javascript so I hope it doesnt suck too much.

    I am trying to get a form to validate with regular expressions using the test method, this code works

    Code:
    else if (! /.@.+\../.test(email))
    // email doesn't match
    {
    alert ('Please enter your email');
                return false;
    }
    else if (! /^[0-9]{4}$/.test(postcode))
    // postcode doesn't match
    {
    alert ('Please enter your postcode');
                return false;
    }
    but this code doesnt

    Code:
    else if (! /^.w.+\.d$/.test(address))
    // if alphanumeric (words and numbers only) does match
    {
    alert ('Please enter your address');
                return false;
    }
    else if (! /^w$/.test(suburb))
    // if alpha (words only) does match
    {
    alert ('Please enter your suburb');
                return false;
    }
    Here is an example of the whole page using the suburb test statement
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
        //Check all submitted details
        function SubmitCheck()
        {
            var fullName;
            var address;
    		var suburb;
            var postcode;
    		var email;
    		var order;
            fullName = document.details.fullname.value;
            address = document.details.address.value;
    		suburb = document.details.suburb.value;
            postcode = document.details.postcode.value;
    		email = document.details.email.value;
    		order = document.details.order.value;
    
            if (fullName == "")
            {
                alert ('Please enter your full name');
                return false;
            }
            else if (address == "")
            {
                alert ('Please enter your street number and street address');
                return false;
            }
    		else if (! /^w/.test(suburb))
    		{
                alert ('Please enter your suburb');
                return false;
            }
            else if (! /^[0-9]{4}$/.test(postcode))
    		{
                alert ('Please enter your postcode');
                return false;
            }
    		else if (! /.@.+\../.test(email))
    		{
                alert ('Please enter your email address');
                return false;
            }
    		else if (order == "")
            {
                alert ('Please enter your order details');
                return false;
            }
            else
            {
                return true;
            }
        }
    // -->
    </script>
    </head>
    
    <body>
    <form method="post" name="details" onsubmit="return SubmitCheck()" action="submit.html">
    <br />
    <table width="516" cellpadding="1" cellspacing="1">
    
          <tr>
            <th width="109" scope="col">&nbsp;</th>
            <th width="222" scope="col">&nbsp;</th>
            <th width="109" scope="col">&nbsp;</th>
            <th width="61" scope="col">&nbsp;</th>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Name: </td>
            <td bgcolor="#CCCCCC"><input name="fullname" type="text" id="fullname" value="" size="37" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Address:</td>
            <td bgcolor="#CCCCCC"><input type="text" name="address" size="37" value="" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Suburb:</td>
            <td bgcolor="#CCCCCC"><input name="suburb" type="text" id="suburb" size="37" /></td>
            <td bgcolor="#99CC00">* Postcode:</td>
            <td bgcolor="#CCCCCC"><input name="postcode" type="text" id="postcode" value="" size="10" maxlength="4" /></td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Email </td>
            <td bgcolor="#CCCCCC"><input name="email" type="text" id="email" size="37" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td height="21" bgcolor="#99CC00">* Order: </td>
            <td rowspan="2" bgcolor="#CCCCCC"><textarea name="order" cols="23.1" rows="4" id="order"></textarea></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
        </table>
        <br />
        <br />
        <input type="submit" value="Submit Details" /> <input type="reset" value="Reset Details" />
    </form>
    
    </body>
    </html>
    Here is an example that works using test regular expressions for the postcode and email fields
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
        //Check all submitted details
        function SubmitCheck()
        {
            var fullName;
            var address;
    		var suburb;
            var postcode;
    		var email;
    		var order;
            fullName = document.details.fullname.value;
            address = document.details.address.value;
    		suburb = document.details.suburb.value;
            postcode = document.details.postcode.value;
    		email = document.details.email.value;
    		order = document.details.order.value;
    
            if (fullName == "")
            {
                alert ('Please enter your full name');
                return false;
            }
            else if (address == "")
            {
                alert ('Please enter your street number and street address');
                return false;
            }
    		else if (suburb == "")
            {
                alert ('Please enter your suburb');
                return false;
            }
            else if (! /^[0-9]{4}$/.test(postcode))
    		{
                alert ('Please enter your postcode');
                return false;
            }
    		else if (! /.@.+\../.test(email))
    		{
                alert ('Please enter your email address');
                return false;
            }
    		else if (order == "")
            {
                alert ('Please enter your order details');
                return false;
            }
            else
            {
                return true;
            }
        }
    // -->
    </script>
    </head>
    
    <body>
    <form method="post" name="details" onsubmit="return SubmitCheck()" action="submit.html">
    <br />
    <table width="516" cellpadding="1" cellspacing="1">
    
          <tr>
            <th width="109" scope="col">&nbsp;</th>
            <th width="222" scope="col">&nbsp;</th>
            <th width="109" scope="col">&nbsp;</th>
            <th width="61" scope="col">&nbsp;</th>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Name: </td>
            <td bgcolor="#CCCCCC"><input name="fullname" type="text" id="fullname" value="" size="37" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Address:</td>
            <td bgcolor="#CCCCCC"><input type="text" name="address" size="37" value="" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Suburb:</td>
            <td bgcolor="#CCCCCC"><input name="suburb" type="text" id="suburb" size="37" /></td>
            <td bgcolor="#99CC00">* Postcode:</td>
            <td bgcolor="#CCCCCC"><input name="postcode" type="text" id="postcode" value="" size="10" maxlength="4" /></td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">* Email </td>
            <td bgcolor="#CCCCCC"><input name="email" type="text" id="email" size="37" /></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td height="21" bgcolor="#99CC00">* Order: </td>
            <td rowspan="2" bgcolor="#CCCCCC"><textarea name="order" cols="23.1" rows="4" id="order"></textarea></td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#99CC00">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
          </tr>
        </table>
        <br />
        <br />
        <input type="submit" value="Submit Details" /> <input type="reset" value="Reset Details" />
    </form>
    
    </body>
    </html>

    Can anyone help me get this to work in exactly the same way as the existing postcode and email statements?

    Cheers
    Dave

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by Dave003

    Code:
    else if (! /^.w.+\.d$/.test(address))
    // if alphanumeric (words and numbers only) does match
    That is looking for any single character followed by the letter w (lowercase) followed by one or more of any character followed by a period followed by the letter d (lowercase).

    http://developer.mozilla.org/en/docs...Objects:RegExp


  •  

    Posting Permissions

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