Monday, December 19, 2016

How to Validate a HTML Form Using JavaScript

How to Validate a HTML Form Using JavaScript


In the previous post, I have described about "How to create a simple form using HTML" step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form. In this post I am going to describe about to Validate a this HTML Form Using JavaScript.

You can validate a HTML Form Using JavaScript for the following circumstances.

  • Whether or not the user left required fields empty
  • Whether or not the user entered a valid e-mail address
  • Whether or not the user entered a valid date
  • Whether or not the user entered text in numeric field or entered number in text field

Here in this post I am going to describe you, "How to Validate Required Fields using JavaScript.

Validating Required Field using JavaScript


This JavaScript Function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If the value is entered the function returns true.

function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}

Complete JavaScript Code with HTML for Validating Required Field


Here are the complete JavaScript codes along with complete HTML codes uses with the JavaScript Functions given below.

<html>
<head><title>Subscription Form</title>
<script type="text/javascript">
function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}

function validate_form(thisform)
{
with(thisform)
{
if (validate_required(fname, "First name must be filled out!")===false)
 {fname.foucus(); return false;}
if (validate_required(lname, "Last name must be filled out!")===false)
 {lname.foucus(); return false;}
if (validate_required(password, "Password must be filled out!")===false)
 {password.foucus(); return false;}
if (validate_required(rpassword, "Retype Password must be filled out!")===false)
 {rpassword.foucus(); return false;}
}
}
</script>
</head>
<body>
<FORM METHOD=GET ONSUBMIT="return validate_form(this);" ACTION="http://www.siteforinfotech.com/p/about-us.html">
<DIV>First Name:<INPUT TYPE=text NAME=fname VALUE=Enter First Name SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Last Name:<INPUT TYPE=text NAME=lname VALUE=Enter Last Name SIZE=30 MAXLENGTH=25></DIV><br/> 
<DIV>Password:<INPUT TYPE=password NAME=password SIZE=30 MAXLENGTH=25></DIV><br/> 
<DIV>Retype Password:<INPUT TYPE=password NAME=rpassword SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Email:<INPUT TYPE=text NAME=email VALUE=Enter Your Email SIZE=30 MAXLENGTH=25></DIV><br/> 
<br/>
<INPUT TYPE=submit VALUE=Submit><INPUT TYPE=reset VALUE=Reset>
</FORM>
</body>
</html>


Preview of the above HTML Code



First Name:

Last Name:

Password:

Retype Password:

Email:



Here I have posted this JavaScript and HTML codes for sample only. You can write validation JavaScript to validate other fields for other circumstances.



Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Create a Digital Clock in JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Posted by at
Labels: , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)