Javascript Form Validation

 

Form Validation using  JavaScript 


coding-zon-js-form-validation
 It is very common for every developer, when developing forms, adding  front-end scripting for validating form data. So why to validate form data? It is necessary because, it will save the server time. JavaScript prevents sending invalid data to server. 

When form submitted, control is given to JavaScript. JavaScript validates from data, in case of any errors it notifies the user and receive correct data from user. Ex: Password minimum length is 8 characters. If user enter a password that is  less than 8 char. It sends alert message to the user until he gives proper data. Once all the data validated, then JavaScript will send it to sever. This will not only save network resources from transmitting unnecessary data over the network, but also save server valuable time.

Below examples shows you how JavaScript validates the form data.

 

JS Home

 

 index.html

<html>
<head>
<title> e-trainings demo on Registration form validation</title>
<script language="JavaScript">
function form_load(form)
{
document.forms [0].elements[0].focus();
}
function validation()
{
//Validation for Email ID
em = document.reg.emailid.value;
pos1 = em.indexOf("@");
pos = em.indexOf(" ");
if(document.reg.fname.value == "")
{
alert("Enter the First Name.");
document.reg.fname.focus();
return false;
}
if(document.reg.lname.value == "")
{
alert("Enter the Last Name.");
document.reg.lname.focus();
return false;
}
if(document.reg.gender.value == "")
{
alert("Select Gender");
document.reg.gender.focus();
return false;
}
if(em == "")
{
document.reg.emailid.focus();
alert("Email cannot be blank");
return false;
}
else if(em.length<8)
{
document.reg.emailid.focus();
alert("Email length cannot be less than 8 characters");
return false;
}
else if(em.indexOf("@")==-1)
{
document.reg.emailid.focus();
alert("The Email Address must contain '@' sign");
return false;
}
else if(pos1<1)
{
document.reg.emailid.focus();
alert("Email address cannot start with '@' sign");
return false;
}
else if(em.indexOf(".")==-1)
{
document.reg.emailid.focus();
alert("The Email Address must contain '.' sign");
return false;
}
else if(pos != -1)
{
document.reg.emailid.focus();
alert("The Email Address cannot contain spaces");
return false;
}
if(document.reg.password.value == "")
{
alert("Enter the Password.");
document.reg.password.focus();
return false;
}
if(document.reg.password.value.length<8 ||
document.reg.password.value.length>15 )
{
alert("Minimum charaters for password is 8 and Maximum character is 15");
document.reg.password.focus();
return false;
}
if(document.reg.cpassword.value == "")
{
alert("Please Confirm the Password.");
document.reg.cpassword.focus();
return false;
}
if(document.reg.password.value != document.reg.cpassword.value)
{
alert("Password not matching.");
return false;
}
if(document.reg.contact.value == "")
{
alert("Enter the Contact.");
document.reg.contact.focus();
return false;
}
if(document.reg.contact.value.length < 10 ||
document.reg.contact.value.length>11)
{
alert("Enter proper Contact.");
return false;
}
}
function form_load(form)
{
document.forms [0].elements[0].focus();
}
</script>
 
</head>
<body onLoad="form_load(this)">
<form id="reg" name="reg" method="post" action="" onsubmit="return
validation()">
<table width="478" border="0">
<tr>
<td width="171" height="55">First Name:</td>
<td width="300"><input class="right" name="fname" type="text"
id="fname" size="50" /></td>
</tr>
<tr>
<td height="43">Last Name:</td>
<td><input name="lname" type="text" id="lname" size="50" /></td>
</tr>
<tr>
<td height="40">Gender:
</td>
<td>
<input name="gender" type="radio" id="gender" value="Male"
checked="checked" />
Male
<input name="gender" type="radio" id="gender" value="Female"/>
Female </td>
</tr>
<tr>
<td height="49">Email-ID:</td>
<td><input name="emailid" type="text" id="emailid" size="50" /></td>
</tr>
<tr>
<td height="49">Password:</td>
<td><input name="password" type="password" id="password" size="50"
/></td>
</tr>
<tr>
<td height="43">Confirm Password:</td>
<td><input name="cpassword" type="password" id="cpassword" size="50"
/></td>
</tr>
<tr>
<td height="43">Contact:</td>
<td><input name="contact" type="text" id="contact" size="50" /></td>
</tr>
<tr>
<td height="39" colspan="2" align="center"><input type="submit"
name="submit" id="submit" value="Register" /></td>
</tr>
</table>
</form>
</body>
</html>

 

Download

 Top

 

coding-zon-js-form-validation

Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more