الأحد، 1 فبراير 2015

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:



مرسلة بواسطة في
التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)