# Contact Form Validation



## Jacob92 (Dec 30, 2011)

Hi every1,

I have to create contact form (I have already built it, please find attachement) validated by JavaScript following client requirments as shown below:


```
[B]First Name[/B]- 
Mandatory – make sure that an entry has been made in this field.
 
 
[B]Second Name[/B] – 
Mandatory - – make sure that an entry has been made in this 
field.
 
[B]House number or name[/B] – Mandatory – 
make sure that an entry has been made in this field.
 
 
[B]Street name[/B] – Mandatory  
- – make sure that an entry has 
been made in this field.
 
 
[B]Town[/B] – Mandatory - – 
make sure that an entry has been made in this field.
 

[B]Post Code[/B] – Mandatory - – 
make sure that an entry has been made in this field.
 
 
[B]Mobile[/B] – Must have an entry if Home is blank, if an entry has 
been made strip out all non-numeric characters.

[B]Home[/B] – Must have an entry if Mobile is blank, if an entry has 
been made strip out all non-numeric characters.
 
 
[B]Email[/B] –                                                 
Mandatory,  plus check the 
format of the email address entered – it must contain an @ symbol at some point 
after the first character followed by a dot at some point after the third 
character – the dot cannot be the last character.
 
 
 
[B]Newspapers Read[/B] – if one of the choices is ‘Other’  
then the ‘State one other Newspaper you read’ field becomes 
mandatory.
 
 
[B]State one other Newspaper you read[/B] –Mandatory if the ‘Other’ 
option is chosen in the Newspapers Read field.
 
 
[B]Comments [/B]– Mandatory and must contain at least 15 
characters.
 
 
[COLOR=black][FONT=Calibri]When [/FONT][/COLOR][FONT=Calibri][COLOR=black]the Submit button is clicked the JavaScript will call a function which will [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]validate the entries made on the form.[/COLOR][/FONT]
[COLOR=black][FONT=Calibri]A [/FONT][/COLOR][FONT=Calibri][COLOR=black]validation with errors will issue an appropriate JavaScript alert message to [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]indicate fields in error. The cursor will also be focussed on the first field in [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]error.[/COLOR][/FONT]
[COLOR=black][FONT=Calibri]A [/FONT][/COLOR][FONT=Calibri][COLOR=black]validation with no errors will issue a JavaScript alert message to read ‘Thank [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]you for your enquiry’.[/COLOR][/FONT]
 
[COLOR=black][FONT=Calibri]When [/FONT][/COLOR][FONT=Calibri][COLOR=black]the Reset button is clicked all fields in the Form will be cleared of entries [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]and the cursor will be focussed back to the first field at the top of the [/COLOR][/FONT]
[FONT=Calibri][COLOR=black]Form[/COLOR][/FONT]
```
I know it could be validated by PHP much more simple, but JavaScript is necessary.
Please find attached files - .html file and .css.

All the best,
Jacob


----------



## Redeye3323 (Sep 20, 2009)

This sounds to me like a school project as I have done something similar this year...


----------



## Jacob92 (Dec 30, 2011)

Oh is it? That's funny then. Do you know how to validate this contact form then?


----------



## Redeye3323 (Sep 20, 2009)

Jacob92 said:


> Oh is it? That's funny then. Do you know how to validate this contact form then?


I do, first of all though, answer me this:

Is this for a school project/assignment?


----------



## Jacob92 (Dec 30, 2011)

No it is not an assignment. If you do, please help. I would really appreciate it.


----------



## Redeye3323 (Sep 20, 2009)

Jacob92 said:


> No it is not an assignment. If you do, please help. I would really appreciate it.


I'll give you the benefit of the doubt then 

Even though you are doing the same BTEC course as me (I think - Extended Diploma in Computing level 3) and this is part of the either client-side or server-side scripting unit.

Ok, I have put a link below to the W3School's tutorial on JavaScript validation.

http://www.w3schools.com/js/js_form_validation.asp

You should be able to use the code and work out how to adapt it to your own.

If you show me what you have already, I may be able to help you even more


----------



## Jacob92 (Dec 30, 2011)

Thank you dude, actually I've found this website yesturday, but the code is useless for me. I mean, it shows how to validate one field such as first name yep, but how do we validate multiple fields such as last name etc? I couldnt figure out how to add next fields to the validation.


```
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
```


----------



## Redeye3323 (Sep 20, 2009)

Jacob92 said:


> Thank you dude, actually I've found this website yesturday, but the code is useless for me. I mean, it shows how to validate one field such as first name yep, but how do we validate multiple fields such as last name etc? I couldnt figure out how to add next fields to the validation.
> 
> function validateForm()
> {
> ...


Ok, so say your form was called "contactform" and you had 3 fields called "fname", "lname" and "message" which all had to be filled in, you'd adapt the code from W3 like below


function validateForm()
{
var a=document.forms["contactform"] ["fname"] .value;

var b=document.forms["contactform"] ["lname"] .value;

var c=document.forms["contactform"] ["message"] .value;

if (a==null || a=="")
{
alert("First name must be filled out");
return false;
}

else if (b==null || b=="")
{
alert("Last name must be filled out");
return false;
}

else if (c==null || c=="")
{
alert("Message must have content inside it");
return false;
}

}


----------



## Jacob92 (Dec 30, 2011)

That's cool. I'll play with it in about 20 mins, need to do some cleaning after friday


----------



## Jacob92 (Dec 30, 2011)

Ok, once I've pasted in code you gave me, and try validation in my browser, it just doesnt work. Once I click on submit it just goes nowhere and shows:


```
This web page has not been found
No web page was found for the web address: file:///E:/my%20contact%20form/action=%22javascript:alert('Thank%20you%20for%20your%20enquiry')
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
```
I just wonder what I did wrong.

I think I did something wrong with the action on the contact form or something. What's wrong?


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title of website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="Author" content="bla bla bla" />
<script type="text/javascript">
function validateForm()
{
var a=document.forms["contactform"] ["fname"] .value;

var b=document.forms["contactform"] ["lname"] .value;

var c=document.forms["contactform"] ["house_number"] .value;

if (a==null || a=="")
{
alert("First name must be filled out");
return false;
}

else if (b==null || b=="")
{
alert("Last name must be filled out");
return false;
}

else if (c==null || c=="")
{
alert("House number must have content inside it");
return false;
}

}
</script>
</head>


<body>
<div id="wrapper">
  <div id="content">
    <form id="contactform" name="contactform" onsubmit="return validateForm()" method="post" action="action="javascript:alert('Thank you for your enquiry')" >
      <div id="contact1">
```

@edit

I know what was wrong.

action="*action="*javascript:alert('Thank you for your enquiry')" >

but still it is not validating, when I click on submit, it just shows thank u for ur enquiry.

@edit 2

Ok, I got this working. The issue was javascript was looking for the value of fname, and my form had first_name. How do I set submit button, to clear the form at submit?

@edit 3

How to I make dependencies and strip out all non-numeric characters?

Mobile – Must have an entry if Home is blank, if an entry has been made strip out all non-numeric characters.
Home – Must have an entry if Mobile is blank, if an entry has been made strip out all non-numeric characters.


----------



## Jacob92 (Dec 30, 2011)

Anyone know how to validate multiple values using jquery?

This is my code and I have managed to validate first cell, how do I add another cells for validation?


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    fname: "required"
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
  	#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
	br { clear: both; }
	input { border: 1px solid black; margin-bottom: .5em;  }
	input.error { border: 1px solid red; }
	label.error {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
	}
	label.valid {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;
	}
</style>
</head>
<body>
  
<form id="myform">
  <label for="fname">Required: </label>
  <input class="left" id="field" name="fname" />
  <label for="lname">Required: </label>
  <input class="left" id="field" name="lname" />
  <label for="street">Required: </label>
  <input class="left" id="field" name="street" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
```


----------



## tanveerahmed2k (Jan 25, 2011)

funny story actually im doing 2nd year BTEC IT, and I just added this into my site for
Client side customisation of web pages unit 20 I Believe?


----------



## Redeye3323 (Sep 20, 2009)

tanveerahmed2k said:


> funny story actually im doing 2nd year BTEC IT, and I just added this into my site for
> Client side customisation of web pages unit 20 I Believe?


Would it surprise you to know that I am doing that exact Unit aswell. Computing Level 3 also I presume.


----------

