I\'m trying to build a registration Html form with input label boxes and use an
ID: 3849937 • Letter: I
Question
I'm trying to build a registration Html form with input label boxes and use an external javascript file to validate each field. However when I click my submit button my external javascript doesn't fire? I will post html and javascript code below. Please tell me what I need to do to get the below code to work as intended. Thanks!
HTML source code:
<!DOCTYPE html>
<html>
<head>
<body>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="ex.css">
<script src="java.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(document).ready(function(){
$('#datepicker').on('change', function(){
var dateThis = $(this).val();
$('#dpicker_name').text(dateThis);
});
});
</script>
</head>
<h1> Registration </h1>
<nav>
<ul>
<li><a href="#">Favorites</a></li><br/>
<li><a href="http://localhost/proj1/test.html">Home</a></li><br/>
<li><a href="#">Orders to approve</a></li><br/>
<li><a href="#">Invoice History</a></li><br/>
<li><a href="#">Quotes</a></li><br/>
<li><a href="#">Quick Order</a></li><br/>
</ul>
</nav>
<form name="myform" action="" method="GET">
<label for="Uname"> </label>
<input id="Uname" name="Uname" placeholder="Username" type="text" />
<label for="Password"> </label>
<input id="Password" name="Password" placeholder="Password" type="password" /><br/><br/>
<label for="RpPassword"> </label>
<input id="RpPassword" name="Repeat Password" placeholder="Repeat Password" type="password" />
<label for="Fname"> </label>
<input id="Fname" name="Fname" placeholder="Firstname" type="text" /><br/><br/>
<label for="lname"> </label>
<input id="Lname" name="Lname" placeholder="Last Name" type="text" />
<label for="Email"> </label>
<input id="Email" name="Email" placeholder="Email" type="text" /><br/><br/>
<label for="A1"> </label>
<input id="A1" name="A1" placeholder="Address 1" type="text" />
<label for="A2"> </label>
<input id="A2" name="A2" placeholder="Address 2 is optional" type="text" /><br/><br/>
<label for="State"> </label>
<input id="State" name="State" placeholder="State" type="text" />
<label for="City"> </label>
<input id="City" name="City" placeholder="City" type="text" /><br/><br/>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="Zcode"> </label>
<input id="Zcode" name="Zcode" placeholder="Zip Code" type="text" /><br/><br/>
<label for="P#"> </label>
<input id="p#" name="P#" placeholder="(xxx)xxx-xxxx" type="text" />
<label for="Gender"> </label>
<input id="Gender" name="Gender" placeholder="Gender" type="text" /><br/><br/>
<label for="M.S"> </label>
<input id="M.S" name="M.S" placeholder="Marital Status" type="text" />
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="Marital Status" value="Single"> Single
<input type="radio" name="Marital Staus" value="Married"> Married<br/>
<input type="radio" name="Marital Status" value="widowed"> Widowed<br/><br/>
<label for="DOB"> </label>
<input type="text" placeholder="DOB" id="datepicker"><span id="dpicker"></span>
<input type="submit" value="submit" />
<input type="reset" value="reset">
</form>
</div>
</body>
</html>
JAVASCRIPT source code:
function validateForm()
{
var a=document.forms["myform"]["Uname"].value;
if(a.length > 50)
{
alert("Username can't be more than 50 characters.")
document.getElementById("Uname").focus();
document.getElementById('Uname').style.backgroundColor = "red";
return false;
}
else if(a.length < 6)
{
alert("Username can't be less than 6 characters.")
document.getElementById("Uname").focus();
document.getElementById('Uname').style.backgroundColor = "red";
return false;
}
var b=document.forms["myform"]["Password"].value;
if(b.length > 50)
{
alert("Password Can't be more than 50 characters.");
document.getElementById("Password").focus();
document.getElementById('Password').style.backgroundColor = "red";
return false;
}
else if(b.length < 8)
{
alert("Password must be at least 8 characters long.")
document.getElementById("Password").focus();
document.getElementById('Password').style.backgroundColor = "red";
return false;
}
var c=document.forms["myform"]["RpPassword"].value;
if(c.length > 50)
{
alert("Repeat password can't be more than 50 characters long");
document.getElementById("RpPassword").focus();
document.getElementById('RpPassword').style.backgroundColor = "red";
return false;
}
else if(c.length < 8)
{
alert("Repeat Password must be atleast 8 characters long.")
document.getElementById("RpPassword").focus();
document.getElementById('RpPassword').style.backgroundColor = "red";
return false;
}
var d=document.forms["myform"]["Fname"].value;
if(d.length > 50)
{
alert("First name can't be more than 50 characters.");
document.getElementById("Fname").focus();
document.getElementById('Fname').style.backgroundColor = "red";
return false;
}
else if(d.length == "")
{
alert("First name can't be blank.")
document.getElementById("Fname").focus();
document.getElementById('Fname').style.backgroundColor = "red";
return false;
}
var f=document.forms["myform"]["Email"].value;
if(f.length > 255)
{
alert("Email can't be more than 255 charachers.")
document.getElementById("Email").focus();
document.getElementById('Email').style.backgroundColor = "red";
return false;
}
else if(f.length == " ")
{
alert("Email can't be left blank.")
document.getElementById("Email").focus();
document.getElementById('Email').style.backgroundColor = "red";
return false;
}
var e=document.forms["myform"]["Lname"].value;
if(e.length > 50)
{
alert("Last name can't be more than 50 characters.");
document.getElementById("Lname").focus();
document.getElementById('Lname').style.backgroundColor = "red";
return false;
else if(e.length == " ")
{
alert("Last name can 't be left blank")
document.getElementById("Lname").focus();
document.getElementById('Lname').style.backgroundColor = "red";
return false;
}
}
var h=document.forms["myform"]["A2"].value;
if( h.length > 100)
{
alert("Address 2 can't be more than 100 character.")
document.getElementById("A2").focus();
document.getElementById('A2').style.backgroundColor = "red";
return false;
else if(h.length == " ")
{
alert("Address 2 can't be left blank. ")
document.getElementById("A2").focus();
document.getElementById('A2').style.backgroundColor = "red";
return false;
}
}
var i=document.forms["myform"]["State"].value;
if( i.length > 50)
{
alert("State can't be more than 50 character.")
document.getElementById("State").focus();
document.getElementById('State').style.backgroundColor = "red";
return false;
else if(i.length == " ")
{
alert("State can't be left blank. ")
document.getElementById("State").focus();
document.getElementById('State').style.backgroundColor = "red";
return false;
}
}
var j=document.forms["myform"]["City"].value;
if( j.length > 50)
{
alert("City can't be more than 50 characters.")
document.getElementById("City").focus();
document.getElementById('City').style.backgroundColor = "red";
return false;
else if(j.length == " ")
{
alert("City can't be left blank. ")
document.getElementById("City").focus();
document.getElementById('City').style.backgroundColor = "red";
return false;
}
}
var k=document.forms["myform"]["Zcode"].value;
if( k.length > 10 )
{
alert("Zip code can't be more than 10 characters.")
document.getElementById("Zcode").focus();
document.getElementById('Zcode').style.backgroundColor = "red";
return false;
else if(k.length == " ")
{
alert("Zip code can't be left blank. ")
document.getElementById("Zcode").focus();
document.getElementById('Zcode').style.backgroundColor = "red";
return false;
}
}
var l=document.forms["myform"]["P#"].value;
if( l.length > 12)
{
alert("Phone number can't be more than 12 characters and has to be in the xxx-xxx-xxxx format.")
document.getElementById("P#").focus();
document.getElementById('P#').style.backgroundColor = "red";
return false;
else if(h.length == " ")
{
alert("Phone number can't be left blank. ")
document.getElementById("P#").focus();
document.getElementById('P#').style.backgroundColor = "red";
return false;
}
}
var m=doument.forms["myform"]["Gender"].value;
if( m.length > 50)
{
alert("Gender can't be more than 50 characters.")
document.getElementById("Gender").focus();
document.getElementById('Gender').style.backgroundColor = "red";
return false;
else if(m.length == " ")
{
alert("Gender can't be left blank. ")
document.getElementById("Gender").focus();
document.getElementById('Gender').style.backgroundColor = "red";
return false;
}
}
Explanation / Answer
You have done exactly right till now .
You missed a small thing.
For example If you have saved your java script file in externally as 'filename.js' as follows.
Then include the following in between
<head> </head>
tags in html file.
You missed this:
_____________
<script type="text/javascript" src="filename.js">
</script>
For example I have done as follows in html file:
<!DOCTYPE html>
<html>
<head>
<body>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="ex.css">
<script src="java.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(document).ready(function(){
$('#datepicker').on('change', function(){
var dateThis = $(this).val();
$('#dpicker_name').text(dateThis);
});
});
</script>
<!-- you missed this -->
<script type="text/javascript" src="filename.js">
</script>
</head>