Jump to content

[SOLVED] Form Validation

davewit13

By davewit13
in Javascript Help

 Share

Recommended Posts

davewit13 Newbie

davewit13

Posted
Posted

Hi Guys,

 

I am having issues calling a javascript function when my html form is being submitted before it is being passed into a php file.

 

the code for the function looks like this:

<script language="JavaScript" type="text/javascript">

function checkform()
{ 
   var cname, cemail, cphone, caddress, cquery;
   with(window.document.choices)
   {
      cname=Name;
      cemail=Email;
      cphone=Phone;
      caddress=Address;
      cquery=Query;
   }

if(cname.value=="")
   {
      alert('Please enter your name');
      cname.focus();
      return false;
   }
else if(cemail.value=="")
   {
      alert('Please enter your email');
      cemail.focus();
      return false;
   }
else if(cphone.value=="")
   {
      alert('Please enter your phone number');
      cphone.focus();
      return false;
   }
else if(caddress.value=="")
   {
      alert('Please enter your address');
      caddress.focus();
      return false;
   }
else if(cquery.value =="")
   {
      alert('Please enter a query');
      Email.focus();
      return false;
   }
else
{
     return true;
 }
}
</script>

 

The form code is as follows:

 

<form action="contact.php" method="get" onsubmit="return checkform()"/>
        <tr>
          <td align="left"  class="bodyText style12" width="100"> Name :</td>
          <td align="right" width="350"><p>
            <input type="text" name="Name" size="28"  maxlength =100 />
            </p></td>
        </tr>
        <tr>
          <td align="left" class="bodyText style12" width="100">Address :</td>
          <td align="right" width="350"><p>
            <input type="text" name="Address" size="28"  maxlength =100 />
          </p></td>
        </tr>
        <tr>
          <td align="left" class="bodyText style12" width="100">Phone:</td>
          <td align="right" width="350"><p>
            <input type="text" name="Phone" size="28"  maxlength =100 />
          </p></td>
        </tr>
        <tr>
          <td align="left"  class="bodyText style12" width="100">Email:</td>
          <td align="right" width="350"><p>
            <input type="text" name="Email" size="28"  maxlength =100 />
          </p></td>
        </tr>
        <tr>
          <td align="left"  class="bodyText style12" width="100">Your Query :</td>
          <td align="right" width="350"></p>
	  <textarea name="Query" cols="30" rows="2"></textarea>		  </td></p></tr>
        <tr>
          <td align="right" colspan="2"><p><input type="submit" name ="Submit" value="Email"/>
              <input type="reset" name ="reset" value="Reset" /></p></td></tr>
		  </form>

 

Please help! It doesnt seem to check anything, just passes it straight to the php file.

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

I Have renamed the form

 

You didn't state if that fixed your problem or not. I'm guessing not based upon the problems I see. Personally using the with() is a waste of time to just crete references you would only use once. Instead I would pass the form object to the script.

 

But, one minor problem I see is the last test which checks if the query field is empty but then puts focus on the email field (using a bad reference). Also, all the Else If statements are unnecessary, you just need IF statements since you will do a return if any are true anyway. I have modified the code so that it will check for ALL errors and then alert the user. Much better user experience IMHO instead of having the user fix one error only to get another one on the next submission attempt. I also added a function called isEmpty() which will trim() the value in a field (removing leading and trailing spaces) before checking if the field is empty. Otherwise, someone could enter spaces and it would be accepted as valid input.

 

<html>
<head>
<script language="JavaScript" type="text/javascript">

function isEmpty(fieldObj)
{
    //Trims leading/trailing spaces
    fieldObj.value = fieldObj.value.replace(/^\s+|\s+$/g,'');
    //Return true/false on whether field is empty
    return (fieldObj.value=='');
}

function checkform(formObj)
{ 
    var errors = new Array();
    var focusObj = false;

    //perform all validations
    if(isEmpty(formObj.Name))
    {
        errors[errors.length] = 'Name cannot be empty';
        if(!focusObj) focusObj = formObj.Name;
    }
    if(isEmpty(formObj.Email))
    {
        errors[errors.length] = 'Email cannot be empty';
        if(!focusObj) focusObj = formObj.Email;
    }
    if(isEmpty(formObj.Phone))
    {
        errors[errors.length] = 'Phone number cannot be empty';
        if(!focusObj) focusObj = formObj.Phone;
    }
    if(isEmpty(formObj.Address))
    {
        errors[errors.length] = 'Address cannot be empty';
        if(!focusObj) focusObj = formObj.Address;
    }
    if(isEmpty(formObj.Query))
    {
        errors[errors.length] = 'Query cannot be empty';
        if(!focusObj) focusObj = formObj.Query;
    }

    //Check if any errors occured
    if(errors.length!=0)
    {
        var errorMsg = 'The following errors occured:\n';
        errorMsg += '\n - ' + errors.join('\n - ');
        alert(errorMsg);
        focusObj.focus();
        return false;
    }
    else
    {
        return true;
    }
}
</script>

</head>

<body>

<form action="contact.php" method="get" onsubmit="return checkform(this);"/>
    <table>
        <tr>
          <td align="left"  class="bodyText style12" width="100"> Name :</td>
          <td align="right" width="350"><p><input type="text" name="Name" size="28" maxlength="100" /></p></td>
        </tr>
        <tr>
          <td align="left" class="bodyText style12" width="100">Address :</td>
          <td align="right" width="350"><p><input type="text" name="Address" size="28" maxlength="100" /></p></td>
        </tr>
        <tr>
          <td align="left" class="bodyText style12" width="100">Phone:</td>
          <td align="right" width="350"><p><input type="text" name="Phone" size="28" maxlength="100" /></p></td>
        </tr>
        <tr>
          <td align="left"  class="bodyText style12" width="100">Email:</td>
          <td align="right" width="350"><p><input type="text" name="Email" size="28" maxlength="100" /></p></td>
        </tr>
        <tr>
          <td align="left"  class="bodyText style12" width="100">Your Query :</td>
          <td align="right" width="350"></p><textarea name="Query" cols="30" rows="2"></textarea></td></p></tr>
        <tr>
          <td align="right" colspan="2">
            <p><input type="submit" name ="Submit" value="Email"/><input type="reset" name ="reset" value="Reset" /></p>
          </td>
        </tr>
    </table>
</form>


</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.