How to create JavaScript Validation Web Design Layout

How to create JavaScript Validation Web Design Layout, In this document, we have discussed JavaScript Form Validation using a sample Login form. The tutorial explores JavaScript validation on submit with detail explanation.

Get Your Form JavaScript Validation Script for Free
Make sure you get the information you need with a free JavaScript validation script or Take the Tour HTML Form JavaScript Validation Script

What are JavaScript validation scripts?

JavaScript Validation Script might sound complicated, but all they do is make sure that data is in the right format. Whether it’s a valid Username or Password, validation scripts make sure that the data you want arrives in the format you need.
At Login Form, we use something called “server-side form validation.” It might sound complicated, but you just need to know that this is an accurate way to check data.

How to create JavaScript Validation Web Design LayoutLogin form

Login form plays a key role in website development, which authenticate user access to other resources. HTML form validation can be done by JavaScript. JavaScript Form Validation With Limit Login Attempts. If a form field (username) or (password) is wrong or empty, this function alerts a message, and returns false, to prevent the form from being submitted:

Here, we are giving our JavaScript codes for validating Login form. In our example, we have a login form with two input fields i.e. username and password, As user clicks on login button, JavaScript validation function comes into act.

Moreover, we allowed three attempts for user to login, after third attempt all fields get disabled.

Create a simple Login form with HTML form client-side validation: Step-by step.

First Download file or folder

How to create project folder name as demo loginjsvalidaiton.

1st folder create loginjsvalidaiton

  • loginjsvalidaiton folder
    • css folder
    • js folder
    • img folder
    • index.html file
    • successfully.html

Step 1: Create Your Login Form (index.html)
To show you how validation works, we’ll create a sample HTML login form with a three fields to validate:
Username field (check username)
Password field (check Password)
Submit field (check Login Account)
Without Validation

Copy past this code your index.html file.

<!DOCTYPE">
<html>
<head>
<title>Demo Login Form Javascript Validation Checker : Project By A.K.TANWAR</title>
 
</head>
<body>
<div class="container">
 
<div class="main">
<h2>Demo Login Form Javascript Validation Checker</h2>
<form id="loginform_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="loginvalidate()"/>
</form>
<span><a href="http://www.freeunlimited3ginternet.com/">Devloped by A.K.TANWAR</a></span>
 </div>
 </div>
</body>
</html>

Step 2. Create successfully.html page and file location successfully.html . you can copy code past in your successfully.html file.

<!DOCTYPE">
<html>
<head> 
<body>
<div class="container">
 
<div class="main3">
<h2>Congratulations! Your Login completed successfully</h2>
 <img src="img/congratulationcard.jpg" >
<span>Devloped by A.K.TANWAR</span>
 </div>
 </div>
</body>
</html>

 

Step 2. Create style.css page and file location css/style.css. you can copy code past in your style.css file.

/* CSS Document */

/* url: http://www.freeunlimited3ginternet.com/ */
/* url: http://www.bt10n.com/ */

/* Below line is used for online Google font */
@import url(https://fonts.googleapis.com/css?family=Raleway);
h2{
    background-color: #FF8A65;
    padding: 31px 36px;
    margin: -13px -51px 5px;
    text-align: center;
    border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}

div.main2{ 
    width: 301px;
    padding: 11px 51px 26px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway; 
    margin-top: 50px;
    BACKGROUND: rgba(200, 235, 59, 0.6);
	clear: both;
}

div.main3{ 
    width: 600px;
    padding: 11px 51px 26px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway; 
    margin-top: 50px;
    BACKGROUND: rgba(200, 235, 59, 0.6);
	 
}

div.main{
    
    width: 301px;
    padding: 11px 51px 26px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway;
    float: left;
    margin-top: 50px;
    BACKGROUND: rgba(255, 235, 59, 0.6);
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

Step 4. Create login.js page and file location js/login.js . you can copy code past in your login.js  file.

Add JavaScript Validation
If you want the data you need in the format you want, HTML form validation is a must. Now that you have the HTML code for the form, all you have to do is add a little JavaScript to check the data and highlight what needs fixing (if anything). It helps you save time, collect accurate data and respond quickly when it matters most. Check whether your forms have valid information using a sample Login form and JavaScript validation scripts.

/* url: http://www.freeunlimited3ginternet.com/ */
/* url: http://www.bt10n.com/ */

// JavaScript Documentjslogin.js
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function loginvalidate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "demoname" && password == "demopass#562"){
alert ("Login successfully");
window.location = "successfully.html"; // Redirecting to other page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}

Step 4. How to use login.js file and style.css file. Simple you can use copy code and past in your both html file. name as a index.html and successfully.html. Copy and past in your html file head section. see code and past.

<head>
<title>Demo Login Form Javascript Validation Checker : Project By A.K.TANWAR</title>
<!-- Add/Connect CSS File Here.. Example folder name: css/cssfilename.js -->
<link rel="stylesheet" href="css/style.css"/>

<!-- Add/Connect JavaScript File Here.. Example folder name: js/jsfilename.js-->
<script src="js/login.js"></script>
</head>

Final index.html file run in Chrome, Mozilla Firefox and any browser.

Any Problem with this code any query please comment us. Thank you visiting here.