I am very new to js and html, could someone help me understand as to why my page is getting redirected to the next page even if the validation fails and my "validate()" function returns only FALSE!
I have created a form that takes name, age, email, state etc as input and it should ideally validate them and then proceed towards the next page.
Here is the code :
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name_length<10)
{
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at))
continue;
else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate();">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
Could somebody please help me with why my code redirects directly to handle.html without checking for validations?
You're trying to get the length of name as follow: name_length this is a typo, however, you have another error: a continue keyword
if((/(\w|\d|.)/).test(before_at))
continue;
^
else
Changed to:
if((/(\w|\d|.)/).test(before_at)) {
//continue; You need to modify this part.
} else {
alert("Please enter a valid email address");
return false;
}
You need to understand that continue keyword must be placed within a loop, i.e: for-loop.
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(e){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name.length<10)
{
alert('Please enter name correctly!');
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at)) {
//continue;
} else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate(event);">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
If you want to start learning web development with html and javascript, i suggest learn shortest way to do it. For javascript validation check this jquery validation
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" name="userForm" id="userForm" method="post">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
<script type="text/javascript">
$('#userForm').validate({
rules: {
name :{
required : true
},
email: {
required : true,
email : true,
},
age: {
required: true,
minlength:18, // Can define minimum age
maxlength:60 // max page
}
},
submitHandler: function(form) {
alert("All Well") ;
$("#userForm").submit(); // form tag id to sumit the form
return false ;
}
});
</script>
</body>
</html>
With jquery validation you can lots too much work with very short hand code.
Hope this will help, All the best.
Related
I'm trying to add validation to the form I made
<fieldset>
<legend>ENTER YOUR INFORMATION HERE FOR DELIVERY</legend>
<form action="" name="deliveryform">
Name* :<input type="text" name="name" id="name">
Phone Number* : <input type="text" name="phonenumber" id="phonenumber">
<span id="warning1"></span>
Address* : <textarea name="address" id="address" required></textarea>
Email* : <input type="text" name="email" id="email">
<span id="warning2"></span>
<input type="submit" id="submitbutton" value="Submit" onsubmit=" return validation()">
</form>
</fieldset>
Javascript
function validation()
{
var name = document.getElementsByName("name").value;
var phonenumber =document.getElementsByName("phonenumber").value;
var email = document.getElementById("email").value;
var emailformat = "[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$";
if(name == ""|| null)
{
alert("Please Enter Your Name!");
return false;
}
if(isNaN (phonenumber))
{
document.getElementById("warning1").innerHTML ="Enter numbers only";
return false;
}
if(!email.match(emailformat))
{
document.getElementById("warning2").innerHTML="Please enter the correct format. Example : Abc1234#gmail.com"
return false;
}
else
{
alert("Submitted Successfully")
}
}
Nothing changed except ''Error Loading Page '' message appeared.
Did I miss something?
I thought coding in without and with Jquery in HTML is the same thing..
I got this code made but i can't get it to validate the required fields with alert boxes for missing fields or submit to a pop up window like i'm trying to do. The code is supposed to validate certain fields that only show up when one of the radio buttons are clicked and a pop up window containing a url is supposed to show up after submission. Not working. Need help.
Code:
window.onload = function() {
document.getElementById('ifBusiness').style.display='none';
}
function BusinessorResidence() {
if(document.getElementById('businessCheck').checked) {
document.getElementById('ifBusiness').style.display='block';
document.getElementById('ifResidence').style.display='none';
}
else {
document.getElementById('ifBusiness').style.display='none';
document.getElementById('ifResidence').style.display='block';
}
}
function validateForm() {
var address=document.forms["myForm"]["address"];
var bname=document.forms["myForm"]["bname"];
var url=document.forms["myForm"]["url"];
var id=document.forms["myForm"]["tax"];
var rname=document.forms["myForm"]["rname"];
var email=documen.forms["myForm"]["email"];
if(address.value == "") {
alert("Please enter an address.");
address.focus;
return false;
}
if(bname.value == "") {
alert("Please enter a business name.");
bname.focus;
return false;
}
if(url.value == "") {
alert("Please enter a business URL.");
url.focus;
return false;
}
if(id.value == "") {
alert("Please enter a business tax ID.");
id.focus;
return false;
}
if(rname.value == "") {
alert("Please enter a residence name.");
rname.focus;
return false;
}
if(email.value == "") {
alert("Please enter an email address.");
email.focus;
return false;
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Assignment</title>
<center><h1>Fill the form below</h1>
</head>
<body>
<form name="myForm" action="http://csit.selu.edu/cgi-bin/echo.cgi" onsubmit="return validateForm()" method="post">
<center><p><b>Address: </b><input type="text" name="address"></p>
<div>
<div>
<input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="businessCheck">This is a Business <input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="residenceChceck">This is a Residence<br>
<div id="ifBusiness" style="display:none">
<b>Business Name: </b><input type="text" id="name" name="bname"><br>
<b>Business Website URL: </b><input type="text" id="url" name="url"><br>
<b>Business Tax ID: </b><input type="text" id="tax" name="tax"><br>
<input type="submit" value="Submit">
</div>
<div id="ifResidence" style="display:none">
<b>Name: </b><input type="text" id="name" name="rname"><br>
<b>Email: </b><input type="text" id="email" name="email"><br>
<input type="submit" value="Submit"></center>
</div>
</form>
<hr>
<hr>
</body>
</html>
The alert boxes are not popping up and I'm not sure how to fix it.
As per the comments, I have added the if-clause checking for business or not.
I also added the code to open the form submission into a new window.
Finally I cleaned up all the things you should not use anymore, like obsolete HTML tags like <b> and <center> and such, adding comments when appropriate.
<!DOCTYPE html>
<html>
<head>
<title>
<h1>Javascript Assignment</h1>
<!-- the titles should be inside the title, not inside the <head> tag -->
<h2>Fill the form below</h2>
</title>
<!-- center tag is deprecated and should be replaced by CSS -->
<style>
head {
text-align: center;
}
.bold {
font-weight: bold;
}
</style>
<!-- script tags should be at the bottom of the body, not inside the <head> -->
</head>
<body>
<form name="myForm" action="http://csit.selu.edu/cgi-bin/echo.cgi" onsubmit="return validateForm()" method="post">
<p>
<span class="bold">Address: </span>
<input type="text" name="address">
</p>
<div>
<div>
<input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="businessCheck">This is a Business
<input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="residenceChceck">This is a Residence
<br>
<div id="ifBusiness" style="display:none">
<!-- <b> tag is deprecated. should be done with CSS -->
<span class="bold">Business Name:</span>
<input type="text" id="name" name="bname">
<br>
<span class="bold">Business Website URL:</span>
<input type="text" id="url" name="url">
<br>
<span class="bold">Business Tax ID: </span>
<input type="text" id="tax" name="tax">
</div>
<div id="ifResidence" style="display:none">
<span class="bold">Name: </span>
<input type="text" id="name" name="rname">
<br>
<span class="bold">Email: </span>
<input type="text" id="email" name="email">
</div>
<!-- missed the closing </div> -->
</div>
</div>
<!-- Only one submit button per form -->
<input type="submit" value="Submit">
</form>
<hr>
<hr>
<!-- script tags should be at the bottom of the body, not inside the <head> -->
<!-- both scripts can be in the same <script> tag -->
<script>
window.onload = function() {
document.getElementById('ifBusiness').style.display='none';
}
function BusinessorResidence() {
var is_business = document.getElementById('businessCheck').checked;
if ( is_business ) {
document.getElementById('ifBusiness').style.display='block';
document.getElementById('ifResidence').style.display='none';
}
else {
document.getElementById('ifBusiness').style.display='none';
document.getElementById('ifResidence').style.display='block';
}
}
function validateForm() {
var is_business = document.getElementById('businessCheck').checked;
var address = document.forms["myForm"]["address"];
var bname = document.forms["myForm"]["bname"];
var url = document.forms["myForm"]["url"];
var tax = document.forms["myForm"]["tax"];
var rname = document.forms["myForm"]["rname"];
var email = document.forms["myForm"]["email"];
// Address always has to be checked
if ( address.value == "" ) {
alert("Please enter an address.");
address.focus();
return false;
}
// Check the banem, tax and url if a business is selected
if ( is_business ) {
if ( bname.value == "" ) {
alert("Please enter a business name.");
// focus() is a method, not a property, so you need to call this function to actually focus the text input.
bname.focus();
return false;
}
// It does not make sense to call the tax id "id", tax is a better name.
if ( tax.value == "" ) {
alert("Please enter a business tax ID.");
tax.focus();
return false;
}
if ( url.value == "" ) {
alert("Please enter a business URL.");
url.focus();
return false;
}
}
// Else check the rname and the email
else {
if ( rname.value == "" ) {
alert("Please enter a residence name.");
rname.focus();
return false;
}
if ( email.value == "" ) {
alert("Please enter an email address.");
email.focus();
return false;
}
}
// Open the popup window.
// _blank refers to it being a new window
// SELU is the name we'll use for the window.
// The last string is the options we need.
var popup = window.open( '', 'SELU', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=400,left=312,top=234' );
// Set the form target to the name of the newly created popup.
var form = document.querySelector( 'form[name="myForm"]' );
form.setAttribute( 'target', 'SELU' );
// Continue as normal
return true;
}
</script>
</body>
</html>
I am trying to validate various fields present in a form using Javascript. But, the fields are not getting validated. The null fields are accepted and email patter is not matched.
<script type="text/javascript">
function validateform(){
var username=document.myform.username.value;
var password=document.myform.password.value;
var course=document.myform.course.value;
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (username==null || username==""){
alert("Name can't be blank");
return false;
} if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
if (course==null || course==""){
alert("Course can't be blank");
return false;
}
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
</script>
<br>
<title>Insert Operation</title>
</head>
<body>
<div id="box">
<form name="myform" method="POST" action="Insert.php" onsubmit="return validateform()">
<div id="textbox">
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
Email: <input type="text" name="email"><br><br>
Course:<input type="course" name="course"><br><br>
<input class="btn" type="Submit" value="Insert" name="done">
</div>
</form>
I have written a form validation but the alert will not be for all the fields if we fill all the fields wrong.
Please check my file and tell me how can I do that.
I mean if we want to see the error after one error what should we do in my codes when I fill all them wrong it just error the first field that I filled it wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3)
{
alert("Write your name correctly");
return false;
}
var a=document.forms["myform"]["firstname"].value;
if(a==null||a=="")
{
alert("please fill the feald");
return false;
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2)
{
alert("Write your last name correctly");
return false;
}
var b=document.forms["myform"]["lastname"].value;
if(b==null||b=="")
{
alert("please fill the feald");
return false;
}
var c=document.forms["myform"]["email"].value;
if(c==null||c=="")
{
alert("please fill the feald");
return false;
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
return false;
}
var d=document.forms["myform"]["phone"].value;
if(d==null||d=="")
{
alert("please fill the feald");
return false;
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11)
{
alert("Write your phone number correctly");
return false;
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
If you want all alerts to be shown, you shouldn't return anything inside your if blocks, the return stops the execution, the code after will not be executed. Here is the code without return and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3)
{
alert("Write your name correctly");
}
var a=document.forms["myform"]["firstname"].value;
if(a==null||a=="")
{
alert("please fill the feald");
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2)
{
alert("Write your last name correctly");
}
var b=document.forms["myform"]["lastname"].value;
if(b==null||b=="")
{
alert("please fill the feald");
}
var c=document.forms["myform"]["email"].value;
if(c==null||c=="")
{
alert("please fill the feald");
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
}
var d=document.forms["myform"]["phone"].value;
if(d==null||d=="")
{
alert("please fill the feald");
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11)
{
alert("Write your phone number correctly");
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
Well, your function is almost ok, but you were not using conditions properly.
I have modified and tested it, it works perfect as your requirement.
Just replace your function with this as below:
function formvalid()
{
var a=document.getElementById("firstname").value;
var b=document.getElementById("lastname").value;
var c=document.getElementById("email").value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
var d=document.getElementById("phone").value;
if (a.length > 0 && a.length < 3)
{
alert("Write your name correctly");
return false;
}
else if(a==null||a=="")
{
alert("please fill the field");
return false;
}
else if (b.length > 0 && b.length<2)
{
alert("Write your last name correctly");
return false;
}
else if(b==null||b=="")
{
alert("please fill the field");
return false;
}
else if(c==null||c=="")
{
alert("please fill the field");
return false;
}
else if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
return false;
}
else if(d==null||d=="")
{
alert("please fill the field");
return false;
}
else if(d.length>11)
{
alert("Write your phone number correctly");
return false;
}
}
Firstly, Remove the return from each condition so that rest of the conditions can also execute.
Secondly, change the structure of conditions so that each field can get cross checked only once.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3){
if(a==null||a==""){
alert("please fill the feald");
}
else
alert("Write your name correctly");
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2){
if(b==null||b==""){
alert("please fill the feald");
}
else
alert("Write your last name correctly");
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2){
if(c==null||c==""){
alert("please fill the feald");
}
else
alert("Write your email correctly");
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11){
if(d==null||d==""){
alert("please fill the feald");
}
else
alert("Write your phone number correctly");
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
I want to make a loginform using pure javascript (no libraries) and I have 2 problems!
SOLVED! by Grainier Perera
When username.value.length hits 4 characters usernameInfo.innerHTML changes back to "Please type ypur username" ! The problem is passwordInfo.innerHTML changes to "At least 6 characters" as soon as username.value.length hits 4 characters. So here is my first problem. I want passwordInfo.innerHTML to change only when I start typing in password field (onkeyup).
My second problem. When I submit the form with empty fields I want both usernameInfo.innerHTML and passwordInfo.innerHTML to change, not only usernameInfo.innerHTML.
To make it easier for u to understand the code I'll paste it all here so you can just copy it and try it yourself. Thank you!
<!DOCTYPE html>
<html>
<head>
<style>
form label {display:block; margin-top:5px;margin-left:3px;font:12px Arial;color:gray;}
form input {width:200px;padding:5px;display:inline-block; margin-top:5px;}
#submit {padding:7px;background-color:#f7af38; border:#f7af38;width:215px;display:inline-block;margin-top:15px;font:11px Tahoma;color:black;}
#usernameInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#passwordInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#finalInfo {font:italic 12px Arial; margin-left:5px;}
</style>
</head>
<body>
<form method="post" action="login.php" onsubmit="return validate();">
<label>Username</label>
<input id="username" name="username" type="text" onkeyup="return validate();" />
<span id="usernameInfo"></span>
<label>Password</label>
<input id="password" name="password" type="password" onkeyup="return validate();" />
<span id="passwordInfo"></span>
<br />
<input type="submit" id="submit" name="submit" />
<span id="finalInfo"></span>
</form>
<script type="text/javascript">
document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";
function validate()
{
var username = document.getElementById('username');
var usernameInfo = document.getElementById('usernameInfo');
var password = document.getElementById('password');
var passwordInfo = document.getElementById('passwordInfo');
if(username.value.length < 4){
usernameInfo.style.color='red';
usernameInfo.innerHTML = "At least 4 characters!";
return false;
}
else{
usernameInfo.style.color='gray';
usernameInfo.innerHTML = "Please type your username!";
}
if(password.value.length < 6){
passwordInfo.style.color='red';
passwordInfo.innerHTML = "At least 6 characters!";
return false;
}
else{
passwordInfo.style.color='gray';
passwordInfo.innerHTML = "Please type your password!";
}
}
</script>
</div>
</body>
</html>
Try This
HTML
<form method="post" action="login.php" onsubmit="return validateForm();">
<label>Username</label>
<input id="username" name="username" type="text" onkeyup="return validateUserName();" />
<span id="usernameInfo"></span>
<label>Password</label>
<input id="password" name="password" type="password" onkeyup="return validatePassWord();" />
<span id="passwordInfo"></span>
<br />
<input type="submit" id="submit" name="submit" />
<span id="finalInfo"></span>
</form>
JavaScript
document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";
function validateUserName()
{
var username = document.getElementById('username');
var usernameInfo = document.getElementById('usernameInfo');
if(username.value.length < 4){
usernameInfo.style.color='red';
usernameInfo.innerHTML = "At least 4 characters!";
return false;
}
else{
usernameInfo.style.color='gray';
usernameInfo.innerHTML = "Please type your username!";
return true;
}
}
function validatePassWord()
{
var password = document.getElementById('password');
var passwordInfo = document.getElementById('passwordInfo');
if(password.value.length < 6){
passwordInfo.style.color='red';
passwordInfo.innerHTML = "At least 6 characters!";
return false;
}
else{
passwordInfo.style.color='gray';
passwordInfo.innerHTML = "Please type your password!";
return true;
}
}
function validateForm()
{
var userValid = validateUserName();
var passValid = validatePassWord();
return userValid && passValid;
}
Working Sample : link