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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Auckland, NZ.
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation/Submision Problem

    When you click 'OK' to the message telling you that you have to complete a field, it instantly submits the form there and then, before you have had a chance to complete it. It does this for every field left blank.

    Anybody???



    <HTML>
    <HEAD>

    <script language="JavaScript">
    <!--
    // Function to validate the form.
    function ProcessForm()
    {

    var Proceed = 1;
    var Message;
    var FocusField;

    while (Proceed == 1)
    {

    if (!document.Validation.Name.value)
    {
    Message = "You must enter your name.";
    FocusField = "Name";
    Proceed = 0;
    break;
    }

    if (document.Validation.AgeGroup.selectedIndex==0)
    {
    Message = "You must select your age group.";
    FocusField = "AgeGroup";
    Proceed = 0;
    break;
    }

    var Address = document.Validation.Address.value
    if (Address.length==0)
    {
    Message = "You must enter your address.";
    FocusField = "Address";
    Proceed = 0;
    break;
    }

    var CityListLen = 4;
    var SelectProceed = 0;
    for (i=0; i<=(CityListLen - 1); i++)
    {
    if (document.Validation.City[i].selected)
    {
    SelectProceed = 1;
    break;
    }
    }
    if (SelectProceed == 0)
    {
    Message = "You must select at least one city.";
    FocusField = "City";
    Proceed = 0;
    break;
    }

    var SkillListLen = 4;
    var CheckboxProceed = 0;
    for (i=0; i<=(SkillListLen - 1); i++)
    {
    if (document.Validation.Skill[i].checked)
    {
    CheckboxProceed = 1;
    break;
    }
    }
    if (CheckboxProceed == 0)
    {
    Message = "You must select at least one skill.";
    FocusField = "";
    Proceed = 0;
    break;
    }

    if (document.Validation.USBorn[1].checked)
    {
    if (!document.Validation.CountryBorn.value)
    {
    Message = "If you weren't born in the US, you must enter the country in which you were born.";
    FocusField = "CountryBorn";
    Proceed = 0;
    break;
    }
    }
    break;
    }

    if (Proceed == 1)
    {
    alert("The form has been successfully completed.");
    }
    else
    {
    alert( Message );
    if (FocusField != "")
    {
    eval("document.Validation." + FocusField + ".focus()");
    }
    }
    }
    //-->
    </script>

    </HEAD>

    <BODY>

    <p><i>* required fields</i></p>

    <FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation">
    <INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz">

    <p>
    <table>
    <tr>
    <td><span class="label">Name:*</span></td>
    <td><input type="text" name="Name"></td>
    </tr>
    <tr>
    <td><span class="label">Age Group:*</span></td>
    <td>
    <select name="AgeGroup">
    <option value="">Select Age Group


    <option value="Under 18">Under 18



    <option value="18-24">18-24



    <option value="25-29">25-29



    <option value="30-39">30-39



    <option value="40 +">40 +


    </select>
    </td>
    </tr>
    <tr>
    <td colspan="2"><span class="label">Address:*</span></td>
    </tr>
    <tr>
    <td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td>
    </tr>
    <tr>
    <td colspan="2">
    <table border="0">
    <tr>
    <td valign="top"><nobr><b>Select at least one city:*</b>&nbsp;&nbsp;&nbsp;</nobr></td>
    <td valign="top"><b>Skill(s):*</b></td>
    </tr>
    <tr>
    <td valign="top">
    <select name="City" size="4" multiple>


    <option value="Chicago">Chicago



    <option value="Los Angeles">Los Angeles



    <option value="New York">New York



    <option value="Washington DC">Washington DC


    </select>
    </td>
    <td valign="top">


    <input type="checkbox" name="Skill" value="ASP">ASP<br>



    <input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br>



    <input type="checkbox" name="Skill" value="HTML">HTML<br>



    <input type="checkbox" name="Skill" value="JavaScript">JavaScript<br>


    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2"><b>Were you born in the US?*</b></td>
    </tr>
    <tr>
    <td colspan="2"><nobr><input type="radio" name="USBorn" value="1" checked>Yes&nbsp;&nbsp;<input type="radio"

    name="USBorn" value="0">No</nobr></td>
    </tr>
    <tr>
    <td colspan="2"><b>If "No", please enter the country.</b></td>
    </tr>
    <tr>
    <td colspan="2"><input type="text" name="CountryBorn"></td>
    </tr>
    <tr>
    <td colspan="2" align="center">
    <table border="0">
    <tr>
    <td><input type="submit" value="Send booking" onClick="ProcessForm()"></td>
    <td><input type="reset" value="Clear" width="75" style="width:75"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </p>
    </form>





    <table border="0">
    <tr>

    <td><a href="source_code.cfm?CodeID=13"><img src="/graphics/btn_viewsource.gif" border="0"></a></td>


    <td><a href="/downloads/FormValidation.zip"><img src="/graphics/btn_download.gif" border="0"></a></td>

    <td><a href="javascript:history.go(-1)"><img src="/graphics/btn_back.gif" border="0"></a></td>
    </tr>
    </table>
    <p>&nbsp;</p>
    </td>
    </tr>


    <tr>
    <td valign="bottom" align="center">
    <p><b>Buy My Book!</b></p>
    <a

    href="http://www.amazon.com/exec/obidos/ASIN/0782141242/qid=1029592042/sr=1-3/ref=sr_1_3/103-6285903-8323001"
    target="_new"><img src="/graphics/MasteringSmall.jpg" border="0" alt="Mastering ColdFusion MX"></a>
    <p class="footer">Available 9/13/2002</p>
    <p>&nbsp;</p>
    </td>
    </tr>

    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ff6600"><img src="/graphics/spacer.gif" height="1" width="1"></td>
    </tr>
    <tr>
    <td><img src="/graphics/spacer.gif" height="5" width="1"></td>
    </tr>
    <tr>
    <td class="footer">&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 1997 - 2002 WebTricks.com</td>
    </tr>
    <tr>
    <td><img src="/graphics/spacer.gif" height="10" width="1"></td>
    </tr>


    <tr>
    <td class="footer">&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.limitedreality.com"><img

    src="/graphics/LimitedRealityBanner.gif" border="0" alt="Limited Reality LLC"></a></td>
    </tr>

    </table>

    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    call ProcessForm on onsubmit event of the Form tag instead. Then in the function, just put return false; when an input is invalid and return true; when all inputs are correct.

    <FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return ProcessForm()">
    ...
    <input type="submit" value="Send booking">

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    Auckland, NZ.
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for such a quick response. I've tried what was suggested, but it still doesn't work. Maybe I'm putting the return true; and the return false; in the wrong places. Please clarify.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    post the code but i may not help you at once, im about to go now

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    !!! WARNING !!! Shameless plug ahead!!

    Is this code you are writing for yourself? Or something you cut and paste? If you are interested in something better, you should check out fValidate, my form validation project.

  • #6
    New Coder
    Join Date
    Aug 2002
    Location
    Auckland, NZ.
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the script again, but without the return false; and return true; pieces, as I believe I put them in the wrong place.

    (Beetle - yes, the script has been copied).

    <html>
    <head>

    <script language="JavaScript">
    <!--
    // Function to validate the form.
    function ProcessForm()
    {

    var Proceed = 1;
    var Message;
    var FocusField;

    while (Proceed == 1)
    {

    if (!document.Validation.Name.value)
    {
    Message = "You must enter your name.";
    FocusField = "Name";
    Proceed = 0;
    break;
    }

    if (document.Validation.AgeGroup.selectedIndex==0)
    {
    Message = "You must select your age group.";
    FocusField = "AgeGroup";
    Proceed = 0;
    break;
    }

    var Address = document.Validation.Address.value
    if (Address.length==0)
    {
    Message = "You must enter your address.";
    FocusField = "Address";
    Proceed = 0;
    break;
    }

    var CityListLen = 4;
    var SelectProceed = 0;
    for (i=0; i<=(CityListLen - 1); i++)
    {
    if (document.Validation.City[i].selected)
    {
    SelectProceed = 1;
    break;
    }
    }
    if (SelectProceed == 0)
    {
    Message = "You must select at least one city.";
    FocusField = "City";
    Proceed = 0;
    break;
    }

    var SkillListLen = 4;
    var CheckboxProceed = 0;
    for (i=0; i<=(SkillListLen - 1); i++)
    {
    if (document.Validation.Skill[i].checked)
    {
    CheckboxProceed = 1;
    break;
    }
    }
    if (CheckboxProceed == 0)
    {
    Message = "You must select at least one skill.";
    FocusField = "";
    Proceed = 0;
    break;
    }

    if (document.Validation.USBorn[1].checked)
    {
    if (!document.Validation.CountryBorn.value)
    {
    Message = "If you weren't born in the US, you must enter the country in which you were born.";
    FocusField = "CountryBorn";
    Proceed = 0;
    break;
    }
    }
    break;
    }

    if (Proceed == 1)
    {
    alert("The form has been successfully completed.");
    }
    else
    {
    alert( Message );
    if (FocusField != "")
    {
    eval("document.Validation." + FocusField + ".focus()");
    }
    }
    }
    //-->
    </script>


    </head>

    <body>
    <p><i>* required fields</i></p>

    <FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return

    ProcessForm()">
    <INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz">

    <p>
    <table>
    <tr>
    <td><span class="label">Name:*</span></td>
    <td><input type="text" name="Name"></td>
    </tr>
    <tr>
    <td><span class="label">Age Group:*</span></td>
    <td>
    <select name="AgeGroup">
    <option value="">Select Age Group

    <option value="Under 18">Under 18

    <option value="18-24">18-24

    <option value="25-29">25-29

    <option value="30-39">30-39

    <option value="40 +">40 +


    </select>
    </td>
    </tr>
    <tr>
    <td colspan="2"><span class="label">Address:*</span></td>
    </tr>
    <tr>
    <td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td>
    </tr>
    <tr>
    <td colspan="2">
    <table border="0">
    <tr>
    <td valign="top"><nobr><b>Select at least one city:*</b>&nbsp;&nbsp;&nbsp;</nobr></td>
    <td valign="top"><b>Skill(s):*</b></td>
    </tr>
    <tr>
    <td valign="top">
    <select name="City" size="4" multiple>

    <option value="Chicago">Chicago

    <option value="Los Angeles">Los Angeles

    <option value="New York">New York

    <option value="Washington DC">Washington DC


    </select>
    </td>
    <td valign="top">


    <input type="checkbox" name="Skill" value="ASP">ASP<br>



    <input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br>



    <input type="checkbox" name="Skill" value="HTML">HTML<br>



    <input type="checkbox" name="Skill" value="JavaScript">JavaScript<br>


    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2"><b>Were you born in the US?*</b></td>
    </tr>
    <tr>
    <td colspan="2"><nobr><input type="radio" name="USBorn" value="1" checked>Yes&nbsp;&nbsp;<input type="radio"

    name="USBorn" value="0">No</nobr></td>
    </tr>
    <tr>
    <td colspan="2"><b>If "No", please enter the country.</b></td>
    </tr>
    <tr>
    <td colspan="2"><input type="text" name="CountryBorn"></td>
    </tr>
    <tr>
    <td colspan="2" align="center">
    <table border="0">
    <tr>
    <td><input type="submit" value="Send booking"></td>
    <td><input type="reset" value="Clear" width="75" style="width:75"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </p>
    </form>
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here you go - the break; statements were not right - and unnecessary... try this instead for starters:

    Code:
    <html> 
    <head> 
    
    <script language="JavaScript"> 
    <!-- 
    // Function to validate the form. 
    function ProcessForm() 
    { 
    
    var Proceed = 1; 
    var Message; 
    var FocusField; 
    
    if (!document.Validation.Name.value) 
    { 
    Message = "You must enter your name."; 
    FocusField = "Name"; 
    Proceed = 0; 
    } 
    
    if (document.Validation.AgeGroup.selectedIndex==0) 
    { 
    Message = "You must select your age group."; 
    FocusField = "AgeGroup"; 
    Proceed = 0; 
    } 
    
    var Address = document.Validation.Address.value 
    if (Address.length==0) 
    { 
    Message = "You must enter your address."; 
    FocusField = "Address"; 
    Proceed = 0; 
    } 
    
    var CityListLen = 4; 
    var SelectProceed = 0; 
    for (i=0; i<=(CityListLen - 1); i++) 
    { 
    if (document.Validation.City[i].selected) 
    { 
    SelectProceed = 1; 
    } 
    } 
    if (SelectProceed == 0) 
    { 
    Message = "You must select at least one city."; 
    FocusField = "City"; 
    Proceed = 0; 
    } 
    
    var SkillListLen = 4; 
    var CheckboxProceed = 0; 
    for (i=0; i<=(SkillListLen - 1); i++) 
    { 
    if (document.Validation.Skill[i].checked) 
    { 
    CheckboxProceed = 1; 
    } 
    } 
    if (CheckboxProceed == 0) 
    { 
    Message = "You must select at least one skill."; 
    FocusField = ""; 
    Proceed = 0; 
    } 
    
    if (document.Validation.USBorn[1].checked) 
    { 
    if (!document.Validation.CountryBorn.value) 
    { 
    Message = "If you weren't born in the US, you must enter the country in which you were born."; 
    FocusField = "CountryBorn"; 
    Proceed = 0; 
    } 
    } 
    
    if (Proceed == 1) 
    { 
    alert("The form has been successfully completed.");
    return true;
    } 
    else 
    { 
    alert( Message ); 
    if (FocusField != "") 
    { 
    eval("document.Validation." + FocusField + ".focus()"); 
    }
    return false;
    } 
    } 
    //--> 
    </script> 
    
    
    </head> 
    
    <body> 
    <p><i>* required fields</i></p> 
    
    <FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return ProcessForm()"> 
    <INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz"> 
    
    <p> 
    <table> 
    <tr> 
    <td><span class="label">Name:*</span></td> 
    <td><input type="text" name="Name"></td> 
    </tr> 
    <tr> 
    <td><span class="label">Age Group:*</span></td> 
    <td> 
    <select name="AgeGroup"> 
    <option value="">Select Age Group 
    
    <option value="Under 18">Under 18 
    
    <option value="18-24">18-24 
    
    <option value="25-29">25-29 
    
    <option value="30-39">30-39 
    
    <option value="40 +">40 + 
    
    
    </select> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"><span class="label">Address:*</span></td> 
    </tr> 
    <tr> 
    <td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    <table border="0"> 
    <tr> 
    <td valign="top"><nobr><b>Select at least one city:*</b>   </nobr></td> 
    <td valign="top"><b>Skill(s):*</b></td> 
    </tr> 
    <tr> 
    <td valign="top"> 
    <select name="City" size="4" multiple> 
    
    <option value="Chicago">Chicago 
    
    <option value="Los Angeles">Los Angeles 
    
    <option value="New York">New York 
    
    <option value="Washington DC">Washington DC 
    
    
    </select> 
    </td> 
    <td valign="top"> 
    
    
    <input type="checkbox" name="Skill" value="ASP">ASP<br> 
    
    
    
    <input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br> 
    
    
    
    <input type="checkbox" name="Skill" value="HTML">HTML<br> 
    
    
    
    <input type="checkbox" name="Skill" value="JavaScript">JavaScript<br> 
    
    
    </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"><b>Were you born in the US?*</b></td> 
    </tr> 
    <tr> 
    <td colspan="2"><nobr><input type="radio" name="USBorn" value="1">Yes  <input type="radio" 
    
    name="USBorn" value="0">No</nobr></td> 
    </tr> 
    <tr> 
    <td colspan="2"><b>If "No", please enter the country.</b></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input type="text" name="CountryBorn"></td> 
    </tr> 
    <tr> 
    <td colspan="2" align="center"> 
    <table border="0"> 
    <tr> 
    <td><input type="submit" value="Send booking"></td> 
    <td><input type="reset" value="Clear" width="75" style="width:75"></td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    </table> 
    </p> 
    </form> 
    </body> 
    </html>
    If that doesn't completely solve your dilemma that will get you 90% of the way there!
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    You forgot to return false; after the prompt & the focus(). No return value is as good as a true.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're right... but at least I got rid of a lot of other junk! I don't feel like rewriting the validation, although it really needs it...
    Last edited by whammy; 08-28-2002 at 01:29 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #10
    New Coder
    Join Date
    Aug 2002
    Location
    Auckland, NZ.
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks whammy. Works a treat.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Yo, whammy (our always-cheerful consigliere) ...

    We crossed tracks...I was responding to sunnyview & didn't see your post so, wasn't commenting on it.

    adios


  •  

    Posting Permissions

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