Can anyone help me out to validate this in javascript please

Question

0.00/5 (No votes)

See more:

Hi there

I am building a stand alone page in HTML, PHP and JavaScript. I have managed to complete my PHP but strangling to start JavaScript as i am new to it. If someone could guide me that would be awesome. Thanks here is my HTML code below:

<div id="form">
		<form name="registration" action="validation.php" method="POST">
			<h3>Registration Form</h3>
			<fieldset id="Logon">
				<legend>Create Logon</legend>
				
				<!-- add a class to all the input boxes instead. Safer and more backwards-compatible -->
                <div class="form-line">
				<label for="username">Username *: </label>
				<input type="text" id="Username" name="userid"/></div>
				
                <div class="form-line">
				<label for="pwd">Password *: </label>
				<input type="password" id="Password" name="pwd" /></div>
				
				<div class="form-line">
				<label for="pwd">Confirm Password *: </label>
				<input type="password" id="Confirm Password" name="confpwd"/></div>
				
				</fieldset>	
			
			<br />
			
			<fieldset id="Details">
				<legend>User Details</legend>
                <div class="form-line">
				<label for="lastname">Surname *: </label>
				<input type="text" id="Surname" name="lastname"/></div>
				
                <div class="form-line">
				<label for="other_names">Other Names *: </label>
				<input type="text" id="Other Names" name="names" /></div>
				
                <div class="form-line">
				<label for="dob">Date of Birth *: </label>
				<input type="text" id="Date of Birth" name="dob"/></div>
				
                <div class="form-line">
				<label for="email">Email *: </label>
				<input type="email" id="Email Address" name="email"/></div>
				
				<div class="form-line">
				<label for="email">Confirm Email *: </label>
				<input type="email" id="Confirm Email" name="confemail" /></div>
				
                <div class="form-line">
				<label for="tel">Telephone: </label>
				<input type="text" id="Telephone" name="tel" /></div>
				
                <div class="form-line">
				<label for="add">Address line 1 *: </label>
				<input type="text" id="Address Line 1" name="add1"/></div>
				
				<div class="form-line">
				<label for="add">Address line 2: </label>
				<input type="text" id="Address Line 2" name="add2" /></div>
				
				<div class="form-line">
				<label for="add">Town/City *: </label>
				<input type="text" id="Town or City" name="twnc"/></div>
				
                <div class="form-line">
				<label for="ptc">Post Code *: </label>
				<input type="text" id="Post Code" name="ptc" /></div>
				
                <input type="submit" value="Submit" />
				<input type="reset" value="Reset" />
 
                <p align="center">Note: All fields marked with * must be completed!.</p>
            </fieldset>	
			</form>
        </div>
		</div> 
		<br />
	        <div id="footer"></div> 
			<p align="center"; font "">Copyright © Your Online Library. All rights reserved </p>
    </body>
</html>

I want to validate the user inputs such as username on the fly to check if username already exists in the database. The php is validating on the server side, now i want a java class to validate end user inputs. I heard using ajax does validation on the fly, but i have never used ajax before. I m not bothered if it is ajax or not i just want to be able to validate the following when user enters information on the registration form:

Username, Password, Surname, Other names, DOB, Tel, Email, Address line 1, address line 2, Town/city and post code.

Something along the lines of the first solution given below, but it has errors :(
Thanks in advance

Posted 14-Dec-11 0:01am

Geofferz

Updated 14-Dec-11 1:43am

v2

Add a Solution

Comments

OriginalGriff 14-Dec-11 6:03am

You forgot to say what the problem was!
Use the "Improve question" widget to edit your question and provide better information.

Slacker007 14-Dec-11 6:04am

Please provide more intel on what you have tried, error messages, or exactly where you are having problems. You might get a better response from the community. Good luck.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shobana16 · Answer 1 · 2011-12-14T00:20:00

Try this,

<input type="submit" value="Submit" onclick="return validate();" />

JavaScript

<script type="text/javascript">
function validate()
{
var name=document.getElementById("Username");
if(name.value=="")
{
alert("Please enter username");
name.focus();
return false;
}
var Password=document.getElementById("Password");
if(Password.value=="")
{
alert("Please enter Password");
Password.focus();
return false;
}
var rePassword=document.getElementById("Confirm Password");
if(rePassword.value=="")
{
alert("Please re-enter Password");
rePassword.focus();
return false;
}
var dob=document.getElementById("Date of Birth");
if(dob.value=="")
{
alert("Please re-enter Password");
dob.focus();
return false;
}
var email=document.getElementById("Email Address");
if(email.value=="")
{
alert("Please re-enter Password");
email.focus();
return false;
}
var cemail=document.getElementById("Confirm Email");
if(cemail.value=="")
{
alert("Please re-enter Password");
cemail.focus();
return false;
}
var address=document.getElementById("Address Line 1");
if(address.value=="")
{
alert("Please re-enter Password");
address.focus();
return false;
}
var city=document.getElementById("Town or City");
if(city.value=="")
{
alert("Please re-enter Password");
city.focus();
return false;
}
var pin=document.getElementById("Post Code");
if(pin.value=="")
{
alert("Please re-enter Password");
pin.focus();
return false;
}
}
</script>

This is the simple validation. If you want detail validation means, you need to check detailly, like email format,only alphabets etc.,

Thanks.