Register Form Validation In Html And Jsquery

How To Validation Register Froms using html java script
How To Validation Register Froms using html java script




Demo



 Download 

Friends, today I will tell you how to secure your web page html input fields with the help of java script which client side scripting.With the help of this, it is very helpful to reduce the serverload that are loading during validating submit form. It is easier to do the survey of the site’s validation service.if In your webform there
is a field where u need user email id or they wrote address or other value which dont want thats why we need it so that we can get the right input or pattren.So let’s start how to do it

JavaScript

Javascript(js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it’s used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. In this post we discuss about how to validate register form



<!————–Start Name Validation———————–>
function namevalidation()
{
var alphabetonly = /^[a-zA-Z]+$/;
var name = document.getElementById(“namex”).value;
if(name.length>0)
{
if(!name.match(alphabetonly))
{
document.getElementById(“namex”).value=””;
alert(“Enter Alphabet Only”);
}

}
else
{
document.getElementById(“namex”).value=””;
alert(“You Need To Required Enter Value”);

}
}

<!————–End Name Validation———————–>

<!————–Start Mobile Number Validation———————–>
function numbervalidation()
{
var numberonly = /^[0-9]+$/;
var number = document.getElementById(“numberx”).value;
if(number.length>0)
{
if(!number.match(numberonly))
{
document.getElementById(“numberx”).value=””;
alert(“Enter Number Only”);
}

}
else
{
alert(“You Need To Required Enter Value”);
document.getElementById(“numberx”).value=””;

}
}

<!————–End Mobile Number Validation———————–>

<!————–Start email Validation———————–>
function emailvalidation()
{
var emailonly = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
var email = document.getElementById(“emailx”).value;
if(email.length>0)
{
if(!email.match(emailonly))
{
document.getElementById(“emailx”).value=””;
alert(“Enter Valid Email Only”);
}

}
else
{
alert(“You Need To Required Enter Value”);
document.getElementById(“emailx”).value=””;

}
}

<!————–End Email Validation———————–>

<!————–Start Password Validation———————–>
function passvalidation()
{

var password = document.getElementById(“passwordx”).value;
if(password.length>0)
{

if(password.length>5)
{

}

else
{
alert(“poor password….!”);
document.getElementById(“passwordx”).value=””;
}

}
else
{
alert(“You Need To Required Enter Value”);
document.getElementById(“passwordx”).value=””;
}
}

<!————–End Password Validation———————–>

<!————–Start Confirm Password Validation———————–>
function cpassvalidation()
{
var password = document.getElementById(“passwordx”).value;
var cpassword = document.getElementById(“cpasswordx”).value;
if(password.length>0)
{
}
else
{
alert(“Please fill Password box first Before Confirm Password “);

}

if(cpassword.length>0)
{

if(cpassword.length>5)
{
if(password!==cpassword)
{
alert(“password or confirm password not same……..! “);
document.getElementById(“passwordx”).value=””;
document.getElementById(“cpasswordx”).value=””;
}
}

else
{
alert(“poor password….!”);
document.getElementById(“cpasswordx”).value=””;
}

}
else
{
alert(“You Need To Required Enter Value”);
document.getElementById(“cpasswordx”).value=””;
}

}

<!————–End Confirm Password Validation———————–>

<!————–Start Policy Or Submit Button Validation———————–>

function submitForm()
{
if (document.getElementById(‘policyx’).checked) {
return true;
} else {
alert(“Please Confirm Box For Policy Term Condition.”);
return false;
}

}
<!————–End Policy Or Submit Validation———————–>

Html Code

What’s inside this Js Property in html codeonfocusout=”function name()” It works when we leave the html input field like when we cursor moves in the box next to the name field or any other fields and when it comes out without writing or with writing it, then it works on time to leave field.And id=”idname” tags use which id is it will show whatever we write data in that input field.

<form action=”#” onsubmit=”return submitForm()” method=”post” style=”border:1px solid #ccc”>
<div class=”container”>
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr><label for=”email”><b>Name</b></label>
<input type=”text” onfocusout=”namevalidation()” id=”namex” placeholder=”Enter Name” name=”name” required><label for=”email”><b>Mobile No.</b></label>
<input type=”text” onfocusout=”numbervalidation()” id=”numberx” placeholder=”Enter Mobile Number Without +” name=”numberx” required><label for=”email”><b>Email</b></label>
<input type=”text” onfocusout=”emailvalidation()” id=”emailx” placeholder=”Enter Email” name=”email” required>

<label for=”psw”><b>Password</b></label>
<input type=”password” onfocusout=”passvalidation()” id=”passwordx” placeholder=”Enter Password” name=”psw” required>

<label for=”psw-repeat”><b>Repeat Password</b></label>
<input type=”password” onfocusout=”cpassvalidation()” id=”cpasswordx” placeholder=”Repeat Password” name=”psw-repeat” required>

<p> <input type=”checkbox” name=”policy” id=”policyx”>Confirm By creating an account you agree to our <a href=”#” style=”color:dodgerblue”>Terms & Privacy</a>.</p>

<div class=”clearfix”>
<button type=”button” class=”cancelbtn”>Cancel</button>
<button type=”submit” class=”signupbtn”>Sign Up</button>
</div>
</div>
</form>

Css Code

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}

/* Add padding to container elements */
.container {
padding: 16px;
}

/* Clear floats */
.clearfix::after {
content: “”;
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code