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 4 of 4

Thread: Form Validation

  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation

    Hie could some1 please help me, I am trying to validate my form with javascript before iy gets passed on to php and my database, the code I have come up with is below but I cant get it to work wot could be the problem?

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

    <html>
    <style type="text/css">
    <!--
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    a:active {
    text-decoration: none;
    }
    -->
    </style><head>
    <link href="CalendarControl.css" rel="stylesheet" type="text/css"><script src="CalendarControl.js" language="javascript">

    function validate() {
    var msg = "You are required to complete the following fields:";
    var status = true;
    if(name==document.oldClients.firstname.value=="") {
    msg += "\n - First name";
    status = false;
    }
    if(status != true)
    {
    alert(msg);
    return(0);
    }
    else
    {
    document.oldClients.submit();
    }
    }
    </script>
    </head>
    <body>
    <?php
    require_once('dbFunction.php');
    ?>

    <form name="oldClients" method="post" action="dbNewJobsheet.php" onSubmit="return validate()">
    <?php
    dbConnect();

    $role = mysql_query("SELECT * FROM STATUS_DESC") or die(mysql_error());
    $staff = mysql_query("SELECT * FROM STAFF")
    ?>

    <table width="75%" cellpadding="5" cellspacing="0" class="borderTop" align="center">
    <td colspan="2" bgcolor="#FFCC00" align="center"><strong>Old Client Jobsheet</strong></td>
    <tr>

    <td align="left" width="65%" valign="top">
    <table align="left" width="100%" cellpadding="5" cellspacing="0">

    <tr align="center" class="formHeader">
    <td width="47%" bgcolor="#FFCC00"><strong>Client details</strong>
    <td width="53%" bgcolor="#FFCC00"><strong>Job sheet details</strong> </td>
    </tr>
    <tr>
    <td valign="top" align="center">

    <table cellpadding="4" class="formText">
    <tr><td>First name*<td><input name="firstName" type="text" class="input"/></td>
    <tr><td>Last name*<td><input name="lastName" type="text" class="input" id="lastName"/></td>
    <tr><td>Company name<td><input type="text" name="company_name" class="input"></td>
    <tr><td>Site address<td><input name="Site_address" type="text" class="input" /></td>
    <tr><td>Phone number<td><input type="text" name="phone_number" class="input"></td>
    <tr><td>E-mail*<td><input type="text" name="email_address" class="input"></td>
    </tr>
    </table>
    <td valign="top" align="center">

    <table cellpadding="3">
    <tr><td class="formText">Job Sheet Number<td class="formText">
    <?php
    echo JobIdGen();
    ?>
    </td>
    <tr><td class="formText">Date<td class="formText"><?php echo date("l, j F Y"); ?></td>
    <tr><td class="formText">Assigned to*<td>
    <select name="assignedStaff">
    <option value="0">Choose one*</option>
    <?php
    while($staffRow = mysql_fetch_array($staff))
    {
    echo '<option value='.$staffRow['staffID'].'>'.$staffRow['username'].'</option>';
    }
    ?>
    </select>

    <tr><td class="formText">Assigned Date*<td>
    <input name="todays_date" onFocus="showCalendarControl(this);" type="text">

    <tr><td class="formText">Assigned Time*<td>
    <?php //<input name="assigned_time" type= "text" id= "assigned_time" class="textAreaBorder">
    ?>
    <select name="postHour"><option value="1"> 1 </option><option selected="selected" value ="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select> : <select name="postMinute"><option value="00"> 00 </option> <option value="15"> 15 </option> <option value="30"> 30 </option> <option value="45"> 45 </option> </select> <select name="postAMPM"> <option value="0"> AM </option> <option selected="selected" value="1"> PM </option> </select>

    </td>
    <tr><td class="formText">Time Created<td class="formText">
    <?php echo strftime("%R",time());
    echo ' Hours';
    ?>

    </td>
    </tr>
    <tr><td>Status*<td>
    <select name="status">
    <option value="0">Choose one</option>
    <?php
    while($row = mysql_fetch_array($role))
    {
    echo '<option value='.$row['status_desc_ID'].'>'.$row['status_type'].'</option>';
    }
    ?>
    </select>
    </td>
    </table>
    <tr><td></td></tr>
    <tr>
    <td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00"><span class="formHeader"> <strong>Request</strong></span></td></tr>
    <tr>
    <td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00"><span class="formHeader">
    <strong>Title* :<input name="title" type="text" class="input"/></strong></span></td></tr>
    <tr>
    <td colspan="2" align="center"><textarea name="textarea" cols="70" rows="10" class="textAreaBorder"></textarea></td></tr>
    <tr>
    <tr><td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00">
    <input type="button" name="clear" value="Clear" class="button" onClick="validate();" >
    <input type="submit" name="submit" value="Submit" class="button" onClick="validate()">
    </td></tr>
    </table>
    </td>
    </tr>

    </table>
    </td>
    </tr>
    </table>

    </form>
    </body>
    </html>
    <script language="JavaScript">
    <!--
    var SymRealOnLoad;
    var SymRealOnUnload;

    function SymOnUnload()
    {
    window.open = SymWinOpen;
    if(SymRealOnUnload != null)
    SymRealOnUnload();
    }

    function SymOnLoad()
    {
    if(SymRealOnLoad != null)
    SymRealOnLoad();
    window.open = SymRealWinOpen;
    SymRealOnUnload = window.onunload;
    window.onunload = SymOnUnload;
    }

    SymRealOnLoad = window.onload;
    window.onload = SymOnLoad;

    //-->

    Could some1 please tell me where I'm getting the java script wrong?

    tahnk you.

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    I like this one the best:
    http://www.massimocorner.com/validator/

    View the demos and see how easy it is.

    It's also easier to use an existing script instead of building one yourself.
    No need to re-invent the wheel so to speak.

  • #3
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.massimocorner.com/validator/

    is a good validator, and many of the JavaScript Frameworks like YUI have some basic form validators, however each they aren't necessarily xhtml strict compliant. Often setting attributes that aren't in the DTD.

    A better solution would be to create hidden elements on the form, that map to the visible field elements. For example you have the form:

    Code:
    <form action="">
    <input type="hidden" value="myusernamevalidationcode" name="usernameValidator"/>
    <input type="hidden" value="mypassowrdvalidationcode" name="passwordValidator"/>
    <input type="text" name="username" />
    <input type="text" name="password" />
    </form>
    Your validation code can be as simple or complicated as you need for the system. I use a generic form validator that searches a form for all visible fields, then finds there validators (if they exists). My validation code is designed in the following way:

    part1 - which events are you listening for:
    a comma delimited list of listeners

    part2 - evaluation functions
    comma delimited evaluation functions corresponding the the listener

    part3 - display text
    comma delimited message

    between each part, I use double pipes ("||"). So a username evaluator might look like the following

    Code:
    "keydown, keypress||function(e){return this.value > 6;},function(e){return this.value < 16;}||Your username is too short,Your username is too long"
    Hopefully, this will help you in designing your own validator or understanding existing ones.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function validate(frm) {
       var msg = "You are required to complete the following fields:";
       var status = true; 
       if (frm.firstName.value=="") {
         msg += "\n - First name";
         status = false;
       }
       if (frm.lastName.value=="") {
         msg += "\n - Last name";
         status = false;
       }
       //...and so on
       if (!status)
       {
         alert(msg);
         return false;
       }
       return true; //all inputs are valid at this point
    }
    Code:
    <form name="oldClients" method="post" action="dbNewJobsheet.php" onSubmit="return validate(this)">
    ...
    <input name="firstName" type="text" class="input"/>
    <input name="lastName" type="text" class="input" id="lastName"/>
    ...
    <input type="submit" name="submit" value="Submit" class="button" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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