I have written a form validation but the alert will not be for all the fields if we fill all the fields wrong.
Please check my file and tell me how can I do that.
I mean if we want to see the error after one error what should we do in my codes when I fill all them wrong it just error the first field that I filled it wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3)
{
alert("Write your name correctly");
return false;
}
var a=document.forms["myform"]["firstname"].value;
if(a==null||a=="")
{
alert("please fill the feald");
return false;
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2)
{
alert("Write your last name correctly");
return false;
}
var b=document.forms["myform"]["lastname"].value;
if(b==null||b=="")
{
alert("please fill the feald");
return false;
}
var c=document.forms["myform"]["email"].value;
if(c==null||c=="")
{
alert("please fill the feald");
return false;
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
return false;
}
var d=document.forms["myform"]["phone"].value;
if(d==null||d=="")
{
alert("please fill the feald");
return false;
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11)
{
alert("Write your phone number correctly");
return false;
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
If you want all alerts to be shown, you shouldn't return anything inside your if blocks, the return stops the execution, the code after will not be executed. Here is the code without return and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3)
{
alert("Write your name correctly");
}
var a=document.forms["myform"]["firstname"].value;
if(a==null||a=="")
{
alert("please fill the feald");
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2)
{
alert("Write your last name correctly");
}
var b=document.forms["myform"]["lastname"].value;
if(b==null||b=="")
{
alert("please fill the feald");
}
var c=document.forms["myform"]["email"].value;
if(c==null||c=="")
{
alert("please fill the feald");
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
}
var d=document.forms["myform"]["phone"].value;
if(d==null||d=="")
{
alert("please fill the feald");
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11)
{
alert("Write your phone number correctly");
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
Well, your function is almost ok, but you were not using conditions properly.
I have modified and tested it, it works perfect as your requirement.
Just replace your function with this as below:
function formvalid()
{
var a=document.getElementById("firstname").value;
var b=document.getElementById("lastname").value;
var c=document.getElementById("email").value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
var d=document.getElementById("phone").value;
if (a.length > 0 && a.length < 3)
{
alert("Write your name correctly");
return false;
}
else if(a==null||a=="")
{
alert("please fill the field");
return false;
}
else if (b.length > 0 && b.length<2)
{
alert("Write your last name correctly");
return false;
}
else if(b==null||b=="")
{
alert("please fill the field");
return false;
}
else if(c==null||c=="")
{
alert("please fill the field");
return false;
}
else if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
{
alert("Write your email correctly");
return false;
}
else if(d==null||d=="")
{
alert("please fill the field");
return false;
}
else if(d.length>11)
{
alert("Write your phone number correctly");
return false;
}
}
Firstly, Remove the return from each condition so that rest of the conditions can also execute.
Secondly, change the structure of conditions so that each field can get cross checked only once.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
</head>
<body>
<script>
function formvalid()
{
var a=document.forms["myform"]["firstname"].value;
if (a.length<3){
if(a==null||a==""){
alert("please fill the feald");
}
else
alert("Write your name correctly");
}
var b=document.forms["myform"]["lastname"].value;
if (b.length<2){
if(b==null||b==""){
alert("please fill the feald");
}
else
alert("Write your last name correctly");
}
var c=document.forms["myform"]["email"].value;
var at= c.indexOf("#");
var dot=c.lastIndexOf(".");
var dot2=c.indexOf(".");
if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2){
if(c==null||c==""){
alert("please fill the feald");
}
else
alert("Write your email correctly");
}
var d=document.forms["myform"]["phone"].value;
if(d.length>11){
if(d==null||d==""){
alert("please fill the feald");
}
else
alert("Write your phone number correctly");
}
}
</script>
<form method="post" action="" onSubmit="formvalid()" name="myform">
<input type="text" name="firstname" id="firstname" placeholder="name">
<br>
<input type="text" name="lastname" id="lastname" placeholder="lastname">
<br>
<input type="text" name="email" id="email" placeholder="email">
<br>
<input type="text" name="phone" id="phone" placeholder="mobile">
<br>
<input type="submit" name="btn" id="btn" value="click">
</form>
</body>
</html>
Related
I am trying to validate three fields within my form. I have written the code for them and thought they would work. The only problem I'm having is that they're not done in a sequence. If i submit the form without filling in anything, it picks up the email validation.If i fill in the first name, again skips the first name and surname validation and goes straight to email. I tried to make it work in a sequence so first name first then surname and email. Any help would be appreciated.
JS
function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
}
function validateForm() {
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
}
function validateForm() {
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
HTML
<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>
<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>
Jsut create only one validateForm() function and inside this function validate all your fields.
function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>
<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>
<input type="submit" value="Submit">
</form>
function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
My problem is that if I perform validation for the form alone, it performs correctly. But if I write a display function for displaying the details it can't perform the validation. How to do my validation for displaying the details which have been given to the form?
Is what I am giving on submit button correct? Are there any changes? How to declare both functions to perform correctly?
Then I have to do validation when I am displaying details. Please do help me to configure that.
<form name="RegForm" action="/submit.php" method="post">
<p>Name: <input id="name" type="text" size=65 name="Name"> </p><br>
<p>Dob: <input id="dob" type="date"></p><br>
<p> Address: <input id="address" type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input id="mail" type="text" size=65 name="EMail"> </p><br>
<p>Password: <input id="pass" type="text" size=65 name="Password"> </p><br>
<p>Telephone: <input id="phone" type="text" size=65 name="Telephone"> </p><br>
<p>Comments: <textarea cols="55" id="Comment" name="Comment"> </textarea></p>
<p><input type="submit" value="send" name="Submit" onclick="Validate(); results(); return false">
</form>
function Validate()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "")
{
window.alert("Please enter your address.");
name.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("#", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return flase;
}
if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
return false;
}
}
function results()
{
var name=document.getElementById('name').value;
var dob=document.getElementById('dob').value;
var address=document.getElementById('address').value;
var email=document.getElementById('mail').value;
var phone=document.getElementById('phone').value;
document.write("<b>Submitted Successfully!!</b>");
document.write("<b>here is your data.</b><br/>");
document.write("Name :"+name+ " <br/>");
document.write("DateOfBirth :"+dob+ " <br/>");
document.write("Address:"+address+ " <br/>");
document.write("Email :"+email+ " <br/>");
document.write("Telephone: "+phone+ " <br/>");
}
</script>
How to configure this?
I have tried and tried and cannot figure out why when I submit this form it will not activate the javascript function Validate().
This is nearly an exact replica of another form with namely one change: I've added a textarea and removed some check boxes.
I could really use some help troubleshooting this thing...
<div id="MainDivDomID">
<h1>Send us a message</h1>
<form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate()">
<input name="Source" type="hidden" value="web" />
<input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />
<div class="halves">
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
</div>
<div class="halves">
<input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
<input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
</div>
<textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>
<input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
<img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />
<p>
<button id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
</p>
</form>
</div>
function Validate() {
var IsValidated = true;
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your last name.");
}
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
if (email == "" || re.test(email) != true) {
IsValidated = false;
alert("Please fill in your email address.");
}
if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in your phone number.");
}
if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in a message.");
}
if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
IsValidated = false;
alert("Please answer the math question.");
}
if (IsValidated == true) {
document.getElementById("contactForm").submit();
} else {
alert("Please fill out all fields.");
return false;
}
}
function CreateEntity() {
document.getElementById("submitButtonText").value = "create";
Validate();
}
There is an exception at the line of code
document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == ""
Dont have any name a7aa41d9-b309-48d7-af97-5a2ce65eb850_First in your document, so that the [0] is undefined.
If you change from
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
to
if (document.getElementsByName('be9953c9-471c-42f4-a1cf-524f5b67fc38_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
The message Please fill out your first name will shown.
You need to prevent the default behavior using e.preventDefault(); otherwise it will try to submit the form
function Validate(e) {
e.preventDefault();
var IsValidated = true;
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your last name.");
}
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
if (email == "" || re.test(email) != true) {
IsValidated = false;
alert("Please fill in your email address.");
}
if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in your phone number.");
}
if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in a message.");
}
if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
IsValidated = false;
alert("Please answer the math question.");
}
if (IsValidated == true) {
document.getElementById("contactForm").submit();
} else {
alert("Please fill out all fields.");
return false;
}
}
function CreateEntity() {
document.getElementById("submitButtonText").value = "create";
Validate();
}
<div id="MainDivDomID">
<h1>Send us a message</h1>
<form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate(event)">
<input name="Source" type="hidden" value="web" />
<input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />
<div class="halves">
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
</div>
<div class="halves">
<input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
<input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
</div>
<textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>
<input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
<img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />
<p>
<button type='submit' id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
</p>
</form>
</div>
I am very new to js and html, could someone help me understand as to why my page is getting redirected to the next page even if the validation fails and my "validate()" function returns only FALSE!
I have created a form that takes name, age, email, state etc as input and it should ideally validate them and then proceed towards the next page.
Here is the code :
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name_length<10)
{
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at))
continue;
else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate();">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
Could somebody please help me with why my code redirects directly to handle.html without checking for validations?
You're trying to get the length of name as follow: name_length this is a typo, however, you have another error: a continue keyword
if((/(\w|\d|.)/).test(before_at))
continue;
^
else
Changed to:
if((/(\w|\d|.)/).test(before_at)) {
//continue; You need to modify this part.
} else {
alert("Please enter a valid email address");
return false;
}
You need to understand that continue keyword must be placed within a loop, i.e: for-loop.
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(e){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name.length<10)
{
alert('Please enter name correctly!');
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at)) {
//continue;
} else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate(event);">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
If you want to start learning web development with html and javascript, i suggest learn shortest way to do it. For javascript validation check this jquery validation
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" name="userForm" id="userForm" method="post">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
<script type="text/javascript">
$('#userForm').validate({
rules: {
name :{
required : true
},
email: {
required : true,
email : true,
},
age: {
required: true,
minlength:18, // Can define minimum age
maxlength:60 // max page
}
},
submitHandler: function(form) {
alert("All Well") ;
$("#userForm").submit(); // form tag id to sumit the form
return false ;
}
});
</script>
</body>
</html>
With jquery validation you can lots too much work with very short hand code.
Hope this will help, All the best.
I'm trying to use javascript to perform client-side verification of input to the following form. The 'firstname' field should contain only alphabetical characters. How can I write the validation function to implement this behaviour?
form.html
<html>
<head>
<script type="text/javascript" src="mainform.js"></script>
</head>
<body>
<form name="mainform" method="post" onSubmit="return validation();" >
firstname <input type="text" name="firstname"><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit">
</body>
</html>
form.js
function validation()
{
var fname=document.mainform.firstname;
var letters="/[a-zA-Z]$/";
if(fname.value.match(letters)){
return true;
}
else
{
alert('first name must be alphabets');
fname.focus();
return false;
}
}
function validation()
{
var fname = document.mainform.firstname;
if(/^[a-zA-Z]+$/.test(fname.value)) {
return true;
} else {
alert('first name must be alphabets');
fname.focus();
return false;
}
}
Do not forget to make a check on the server side too for security.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="button"]
{
background: #E17698;
}
</style>
<script>
$(document).delegate("#submit","click",function(e)
{
var name = $("#fname").val();
var hasError = false;
var searchReg = /^[a-zA-Z ]+$/;
if(name == '') {
$("#txtt").after('<span class="error" style="color:red;"> *Fill Name Box</span>');
hasError = true;
} else if(!searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:red;"> **Enter Vaild Name.</span>');
hasError = true;
}else if(searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:white;"> Vaild Name</span>');
}
if(hasError == true) {
return false
}
});
</script>
</head>
<body>
<form name="mainform" method="post">
firstname <input type="text" name="firstname" id='fname'><label id="txtt"></label><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit" id='submit'>
</form>
</body>
</html>