Forms
When browsing websites , users often need to practice for provide information such as search queries, email address and Pin codes . HTML provides mechanism , called form for collecting data from user.
Attributes of Form
- Name
- Method
- Text Input Controls
- Checkbox Controls
- Radio Box Controls
- Select Box Controls
- File Select Boxes
- Submit and Reset Button
Procedure For Programming
- Open Notepad(HTML Editor)
- "Script" must be contained inside "head" .
- Get the details in the form.
- Check the details in the form by using various constraints in JavaScript.
- If all the details are filled Correct ,give message as "Successfully Filled " and it will be take to next page.
- Else , alert message for error anything if we typed wrong/without filling.
- Check the Output.
Coding For Form Validation using JS
You want to open Notepad , it is a default software in your system. After typing the code , you want to save the file as ".html" (eg: form.html like this you want to save your file).
(Note : I take one website category as Shopping for form validation)
Program
<html>
<head>
<title> ::: MY SHOP ::: Registration </title>
<head>
<script type="text/javascript">
function validateForm() {
let x = document.forms["fr"]["fname"].value;
let y = document.forms["fr"]["lname"].value;
var address = document.forms.fr.Comments.value;
var pincode = document.forms.fr.Pincode.value;
var email = document.forms.fr.EMail.value;
var phone = document.forms.fr.Phone.value;
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
var regPhone=/^\d{10}$/;
var regPincode=/^\d{6}$/;
if(x == ""){
alert("First Name must be filled out");
return false;
}
if(y == ""){
alert("Last Name must be filled out");
return false;
}
if(email=="" || !regEmail.test(email))
{
alert("Please enter a valid e-mail address.");
return false;
}
if(phone == "" || !regPhone.test(phone))
{ alert("Please enter a valid phone number.");
return false;
}
if(address == ""){
alert("Please enter a valid address.");
return false;
}
if(pincode == "" || !regPincode.test(pincode))
{
alert("Please enter your pincode");
return false;
}
if(pincode.length <6)
{
alert("Pincode Should be 6 characters");
return false;
}
else{
alert("Successfully filled all the details");
return true;}
}
</script>
</head>
<body>
<center><h1> ONLINE SHOPPING FORM</h1></center>
<form name="fr" method="post" action="1.html" onsubmit="return validateForm()">
<p><label> First Name*
<input name ="fname" type="text" size="25" id="x"/>
</label></p>
<p><label> Last Name*
<input name ="lname" type="text" size="25" id="y"/>
</label></p>
<p>E-mail Address: <input type="text"
size="65" name="EMail" /></p>
<br />
<p>Mobile Number: <input type="text"
size="65" name="Phone" /></p>
<br />
<p><label>Address:<br/>
<textarea name="Comments" rows="2" cols="26"></textarea></label></p>
<p><label>Pincode:
<input name="Pincode" type="text" size="6" maxlength="6"></label></p>
<p><Strong>Gender</Strong><br/>
<label> Gender
<input name ="gender" type="radio" value="male" Checked="Checked">Male<br></label>
<input name ="gender" type="radio" value="female">Female<br></label></p>
<p><label>City*:
<select type ="text" value="" name="city">
<option Selected="Selected">Coimbatore</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
<option>Bangalore</option>
<option>Hyderabad</option>
</select>
</label>
</p>
<p><label>Item Orders:
<select type="text" name="Item Orders">
<option Selected="Selected">Furniture</option>
<option>Grocery</option>
<option>Knife</option>
<option>Women's Cosmetics</option>
</select></label></p>
<p><label>PayOn:
<input type ="radio" name="payon" value="Cash On Delivery" Checked="Checked">Cash On Delivery<br>
<input type ="radio" name="payon" value="Pay On Online">Pay On Online</br></label></p>
<p><input type="submit" value="Submit"/>
<input type="reset" value="Reset"></p>
</form>
</body>
</html>
Programming for "1.html"
<h1><center>YOUR ORDER IS PLACED SUCCESSFULLY!!!</center></h1>
Result :
You can view your result in the web browser like Internet explorer , Chrome , Firefox etc.,.
 |
| Without filling details Form will be appear like this. |
 |
| Without Filling the details , form get submitted then alert message will appear for each Firstname , lastname,address,email(show error with "@" ".") , pincode(6), mobilenumber(10). |
 |
| After filling all the details , then give the "submit" button and message will display as "Successfully filled all the details " and then , it will take to next page " 1.html". |
 |
| Give Submit Button and alert message will display ,give OK .That page will redirect to "1.html" |
"Validating the form Using JavaScript(JS)" , I share above program to easily understand and better to understand the each comment and tags are "how it is working?" . I think ,it is useful for all the beginners "when they first come to study web development/Technology?".
I hope you will like and enjoy this Blog . If you have any queries you can comment in the comment box .
If you like this blog you can share with your friends.
Thank you
For spending your valuable time to read my Blog.
No comments:
Post a Comment