Top Ad

الرئيسية JavaScript Programming Guide 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:



How to Validate a HTML Form Using JavaScript? مراجعة Eljoker يوم 11:05 م التقييم: 5

التصنيف :

لمحة عن

عدد المشاركات : 35

بعد الطلبات المتزايدة على تعريب قوالب بلوجر يسر ادارة موقع صقر التعريب توفير خدمة تعريب قوالب بلوجر مجانا ولمدة غير محدودة.للاستفادة من خدمة تعريب قوالب بلوجر مجانا صقر التعريب.

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

الاشتراك في: تعليقات الرسالة (Atom)
جميع الحقوق محفوظة // TECH © 2014 - 2015
تعريب صقر التعريب

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.