How to validate user form with javascript

Question

0.00/5 (No votes)

See more:

hi there,

I am putting together a stand alone registration page. I want to use javascript to validate user inputs. I have the code below but doesn't seem to work, not sure if my connection to the html page is correct or not. Please could someone point me in the right direction on the following code:

<!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>
<link rel="stylesheet" type="text/css" href="StyleSheet.css"/></head>
<script type="text/javascript" src="javascript.js"></script>

<html>
    <body>

	<div id="form">
		<form name="registration" onsubmit="return validate" 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>

javascript:

<script type="text/javascript">
function validate()
{
	//registration form function - field variables
	var userid = document.form["registration"]["userid"].value;
	var pwd = document.form["registration"]["pwd"].value;
	var confpwd = document.form["registration"]["confpwd"].value;
	var lastname = document.form["registration"]["lastname"].value;
	var fname = document.form["registration"]["fname"].value;
	var dob = document.form["registration"]["dob"].value;
	var email = document.form["registration"]["email"].value;
	var confemail = document.form["registration"]["confemail"].value;
	var tel = document.form["registration"]["tel"].value;
	var add1 = document.form["registration"]["add1"].value;
	var add2 = document.form["registration"]["add2"].value;
	var twnc = document.form["registration"]["twnc"].value;
	var ptc = document.form["registration"]["ptc"].value;
	
	
	var valid = true;
    
	var username=document.getElementById("userid");
		
		if(username.value=="")
		{
			alert("Please enter username");
			username.focus();
			return false;
		}
	var Password=document.getElementById("pwd");
		if(Password.value=="")
		{
		alert("Please enter Password");
		Password.focus();
		return false;
		}
	var rePassword=document.getElementById("confpwd");
		if(rePassword.value=="")
		{
		alert("Please re-enter password");
		rePassword.focus();
		return false;
		}
	var dob=document.getElementById("dob");
		if(dob.value=="")
		{
		alert("Please re-enter dob");
		dob.focus();
		return false;
		}
	var email=document.getElementById("email");
		if(email.value=="")
		{
		alert("Please re-enter email");
		email.focus();
		return false;
		}
	var cemail=document.getElementById("confemail");
		if(cemail.value=="")
		{
		alert("Please re-enter email");
		cemail.focus();
		return false;
		}
	var address=document.getElementById("add1");
		if(address.value=="")
		{
		alert("Please re-enter address");
		address.focus();
		return false;
		}
	var city=document.getElementById("twnc");
		if(city.value=="")
		{
		alert("Please re-enter town/city");
		city.focus();
		return false;
		}
	var post=document.getElementById("ptc");
		if(pin.value=="")
		{
		alert("Please re-enter Postcode");
		pin.focus();
		return false;
		}
}
</script>

Can someone check my connection to the html page please as well because it is not doing anything. Bare in mind i am new to building web pages. I want to try and validate all user inputs, I did not include the full html class by the way. If required i will do so.

Thanks in advance

Posted 20-Dec-11 1:20am

Geofferz

Add a Solution

3 solutions

Solution 1

Where is the submit button in your form? that's the issue. Check this page
Form onsubmit Event[^] & its example[^]

Posted 20-Dec-11 1:30am

thatraja

Solution 3

Hi ,
Username JavaScript Validation[^]

Posted 20-Dec-11 2:12am

srinivas vadepally

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)

patil.ravi035 · Accepted Answer · 2011-12-20T02:03:00

hi,
try this way

html code
--------------------------------------------------------------------------

ASP.NET

<pre lang="xml"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="javascript.js" type="text/javascript"></script>
</head>
<html>
<body>
    <form name="registration">
    <div>
        Username:<input type="text" name="Username" /><br />
        <br />
        Password:<input type="text" name="Password" /><br />
        <br />
        ConfirmPassword:<input type="text" name="ConfirmPassword" /><br />
        <br />
        <input type="button" value="Login" onclick="validate()" />
        <br />
        <br />
    </div>
    </form>
</body>
</html>

javascript.js
------------------------------------------------------------------

JavaScript

function validate() {
    if (document.registration.Username.value == 0) {
        alert("Enter username");
    }

    else if (document.registration.Password.value == 0) {
        alert("enter Password");
    }
    else if (document.registration.ConfirmPassword.value == 0) {
        alert("enter ConfirmPassword");
    }
    else {

        alert("Sucessfull Login");
    }
}