Results 1 to 3 of 3

Thread: help validating html form with javascript

  1. #1
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question help validating html form with javascript

    Hi

    I'm very much a beginner at Javascript and although I'm starting to understand it, I'm struggling to understand why a form I've created doesnt validate when I hit the submit button. All it does is open the thankyou page which isn't meant to open until all fields have been validated successfully. Of course without the submit attempting to validate the form fields I don't know if I've scripted the validation correctly or not.

    I've tried looking at error console and it keeps telling me that validateForm is not defined. Unfortunately this means nothing to me so I have no idea how to fix it. Here's the code for my page:

    <!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>Crystaladium - NITLC students</TITLE>

    <link rel="stylesheet" type="text/css" href="home.css">
    <link href="stars.css" type="text/css" rel="stylesheet">

    <SCRIPT TYPE="text/javascript">
    <!--
    function validateForm(myForm){
    var firstname = /^[a-zA-Z]+$/;
    if(myForm.value.match(firstname)){
    return true;
    }
    else{
    window.alert("Please enter your first name (A-Z characters only");
    firstname.focus();
    return false;
    }
    }
    var lastname = /^[a-zA-Z]+$/
    if(myForm.value.match(lastname)){
    return true;
    }
    else {
    window.alert("Please enter your Surname (A-Z characters only");
    firstname.focus();
    return false;
    }
    }
    var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(myForm.value.match(email)){
    return true;
    }
    else {
    window.alert("Please enter a valid email address" (example joe.bloggs@domain.co.uk");
    email.focus();
    return false;
    }
    }
    var phone = (0123456789);
    if(myForm.value.match(phone)){
    return true;
    }
    else {
    window.alert("Please enter your telephone number (including area code)");
    phone.focus();
    return false;
    }
    }
    var nitlc = ([a-zA-Z]{1,2} + 0123456789);
    if(myForm.value.match(nitlc)){
    return true;
    }
    else {
    window.alert("Please enter your NITLC student number (example AB1234567)");
    nitlc.focus();
    return false;
    }
    }
    var address = ([/^[0-9a-zA-Z]+$);
    if(myForm.value.match(address)){
    return true;
    }
    else {
    window.alert("Please enter your address, we'll need it to send your free gift if you win!!");
    address.focus();
    return false;
    }
    }
    var hours = (>=0 + <25);
    if(myForm.value.match(hours)){
    return true;
    }
    else {
    window.alert("Please enter average number of hours spend on-line per day (0-24)");
    hours.focus();
    return false;
    }
    }
    var county = ();
    if (county.options[county.selectedIndex].value == "")
    {
    window.alert("You must select a county for your address");
    county.focus();
    return false;
    }
    var radio_button = false;

    // Loop from zero to the one minus the number of radio button selections
    for (counter = 0; counter < radio_form.radio_button.length; counter++)
    {
    // If a radio button has been selected it will return true
    // (If not it will return false)
    if (radio_form.radio_button[counter].checked)
    radio_choice = true;
    }

    if (!radio_button)
    {
    // If there were no selections made display an alert box
    alert("Please select at least one of the interests.")
    radio_button.focus();
    return (false);
    }
    return (true);
    }
    var optin = ();

    //-->

    </SCRIPT>

    </HEAD>

    <BODY text="#336633">

    <IMG alt="Crystaladium" src="logo.jpg">

    <DIV id="menu" align="left">

    <ul>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="index.html">Home</A></li>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="products.htm">Our
    Products</A></li>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="buying.html">How to
    Buy</A></li>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="zodiac.htm">Birth
    Stones</A></li>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="aboutcrystals.htm">About
    Crystals</A>

    <LI><IMG src="star.gif" alt="">&nbsp;<A
    href="gifts.html">Gift Ideas</A></li>
    </UL></DIV>

    <div class="head"></div>
    <div id="header">

    <img src="images/logo.gif" alt="" title="">
    </div>
    <div class="head"></div>
    <h2>Tell us about yourself you could win a beautiful free gift...</h2>

    <form name="myForm" method="get" onsubmit="return validateForm()" action="thankyou.html">

    <table>
    <tr>
    <td align="right">First Name</td>

    <td><input type="text" name="firstName" size="20" maxlength="20"></td>
    <td align="right">Last Name</td>
    <td><input type="text" name="lastName" size="20" maxlength="20"></td>
    </tr>

    <tr>
    <td align="right">Email Address</td>
    <td><input type="text" name="email" size="20" maxlength="55"></td>
    <td align="right">Phone</td>

    <td><input type="text" name="phone"></td>
    </tr>
    <tr>
    <td align="right">NITLC Student Number</td>
    <td><input type="text" name="nitlc"></td>
    <td align="right">Average hours a day spent on-line</td>
    <td><input type="text" name="hours" size="2" maxlength="2"></td>
    </tr>
    <tr>
    <td align="right">Address:</td>
    <td><textarea cols="15" rows="4" name="address"></textarea></td>


    </tr>

    <tr>
    <td align="right">County</td>
    <td>
    <select class="option" name="county">
    <option value="none">Please Select County</option>
    <option value="Bedfordshire"> Bedfordshire</option>

    <option value="Berkshire"> Berkshire</option>
    <option value="Buckinghamshire"> Buckinghamshire</option>

    <option value="Cambridgeshire"> Cambridgeshire</option>
    <option value="Cheshire"> Cheshire</option>

    <option value="Cornwall"> Cornwall</option>
    <option value="Cumberland"> Cumberland</option>
    <option value="Derbyshire"> Derbyshire</option>

    <option value="Devon"> Devon</option>

    <option value="Dorset"> Dorset</option>
    <option value="Durham"> Durham</option>
    <option value="Essex"> Essex</option>
    <option value="Gloucestershire"> Gloucestershire</option>

    <option value="Hampshire"> Hampshire</option>
    <option value="Herefordshire"> Herefordshire</option>
    <option value="Hertfordshire"> Hertfordshire</option>
    <option value="Huntingdonshire"> Huntingdonshire</option>

    <option value="Kent"> Kent</option>

    <option value="Lancashire"> Lancashire</option>
    <option value="Leicestershire"> Leicestershire</option>
    <option value="Lincolnshire"> Lincolnshire</option>

    <option value="London"> London</option>

    <option value="Middlesex"> Middlesex</option>

    <option value="Norfolk"> Norfolk</option>
    <option value="Northamptonshire"> Northamptonshire</option>

    <option value="Northumberland"> Northumberland</option>

    <option value="Nottinghamshire"> Nottinghamshire</option>
    <option value="Oxfordshire"> Oxfordshire</option>

    <option value="Rutland"> Rutland</option>

    <option value="Shropshire"> Shropshire</option>

    <option value="Somerset"> Somerset</option>
    <option value="Staffordshire"> Staffordshire</option>
    <option value="Suffolk"> Suffolk</option>

    <option value="Surrey"> Surrey</option>

    <option value="Sussex"> Sussex</option>
    <option value="Warwickshire"> Warwickshire</option>
    <option value="Westmoorland"> Westmoorland</option>

    <option value="Wiltshire"> Wiltshire</option>

    <option value="Worcestershire"> Worcestershire</option>
    <option value="Yorkshire"> Yorkshire</option>
    </tr>

    <tr>
    <td align="right">Post Code</td>

    <td><input type="text" name="postCode" size="7" maxlength="7"></td>
    </tr>

    </SELECT>

    </TABLE>
    <BR><fieldset name="interests"> If you win we'll need to know what areas interest you so we can choose a gift you'll love.
    <BR>Please select from the following:<BR><BR>
    <label><input type="radio" name="radio_button" value="0" />Gemstones</label>
    <label><input type="radio" name="radio_button" value="1" />Jewellery</label>

    <label><input type="radio" name="radio_button" value="2" />Meditation</label>
    <label><input type="radio" name="radio_button" value="3" />Incense</label>
    <label><input type="radio" name="radio_button" value="4" />Birth Stones</label>
    <label><input type="radio" name="radio_button" value="5" />Tumblestones</label>
    <label><input type="radio" name="radio_button" value="6" />CDs</label>

    </fieldset></td></tr>

    <BR><fieldset>
    <label><input type="checkbox" class="chk" name="optin" value="8" />If you'd like to recieve occasional emails telling you about our special offers,
    please click this box.</label></fieldset>
    <input type="submit" name="submitButtonName" value="Submit Form" onclick="return validateForm()">
    </form>

    <DIV id=Footer align=center><br>
    <a href="aboutus.htm">About Us</a> |
    <a href="contact.htm">Contact Us</a> |
    <a href="sitemMap.htm">Site Map</a> |

    <a href="disclaimer.htm">Disclaimer</a>
    </DIV></BODY></html>

    Please can someone tell me how to define the function validateForm so that I can check that my validation script will work.
    Many thanks!!

  2. #2
    Join Date
    May 2008
    Posts
    144
    Thanks
    6
    Thanked 11 Times in 11 Posts

    Default

    you should change the submit button to a regular old button. then in your validation script, add an if statement that submit if the form validates.
    use "formname.submit()" to submit the form without a submit button... you can even use a link with an onclick even INSTEAD of a button!

  3. #3
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    Did you not see the code I put on your other post about this, it was a complete code that validated that there was input in each of your fields.

    To validate the contents of certain fields, eg is it a valid email format, you can add an "onblur" or "onchange" function.

    This way you validate certain fields at the time of input and that other fields have content at the time of submitting the form.

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
  •