Lab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway Reservation
Uploaded by
nishantLab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway Reservation
Uploaded by
nishantLAB FAT
CSE3002 - IWP
L43+L44
18BCE0820
Nishant Pantbalekundri
2. Railway reservation
Code -
Index.php
<HTML>
<HEAD>
<TITLE>Indian Railways</TITLE>
<style type="text/css">
@import url(style.css);
#logo {
border-radius: 25px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
* {
color: white;
}
html {
background: url(img/bg7.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main {
width:700px;
height: 4 00px;
margin: 0 auto;
margin-top: 30px;
color:white;
border-radius: 25px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: rgba(0,0,0,0.3);
}
</style>
</HEAD>
<BODY>
<?php
session_start();
include("header.php"); ?>
<div id="main"><div id="logo">
<A HREF="index.php">
<IMG SRC="img/logo.png" alt="Home" id="logo" width="150"
height="150"></IMG>
</A></div>
<h1 align="center">Welcome to Indian Railways!</h1><br/><br/><br/>
<h2 align="center">Have a safe journey with us</h2>
<br/><br/><br/>
<?php
if(isset($_SESSION['user_info']))
cho '<h3 align="center"><a href="booktkt.php">Book here</a></h3>';
e
else
cho '
e <h3 align="center"><a href="register.php">Please register/login
before booking</a></h3>';
?>
</div>
</BODY>
</HTML>
Login.php
<?php
session_start();
if (isset($_POST['submit']))
{
$conn = mysqli_connect("localhost","root","","railway");
if(!$conn){
echo "<script type='text/javascript'>alert('Database
failed');</script>";
die('Could not connect: '.mysqli_connect_error());
}
$email=$_POST['email'];
$pw=$_POST['pw'];
$sql = "SELECT * FROM passengers WHERE email = '$email' AND password =
'$pw';";
$sql_result = mysqli_query ($conn, $sql) or die ('request "Could not
execute SQL query" '.$sql);
$user = mysqli_fetch_assoc($sql_result);
if(!empty($user)){
$_SESSION['user_info'] = $user['email'];
$message='Logged in successfully';
}
else{
$message = 'Wrong email or password.';
}
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
title>Login</title>
<
</head>
<script type="text/javascript">
function validate() {
var E mailId=document.getElementById("email");
var a tpos = EmailId.value.indexOf("@");
var d otpos = EmailId.value.lastIndexOf(".");
var p w=document.getElementById("pw");
f (atpos<1 || dotpos<atpos+2 || dotpos+2>=EmailId.value.length)
i
{
alert("Enter valid email-ID");
EmailId.focus();
return false;
}
if(pw.value.length< 8)
{
alert("Password consists of atleast 8 characters");
pw.focus();
return false;
}
return true;
}
</script>
<style type="text/css">
#loginarea{
background-color: white;
width: 30%;
margin: auto;
border-radius: 25px;
border: 2px solid blue;
margin-top: 100px;
background-color: rgba(0,0,0,0.2);
box-shadow: inset -2px -2px rgba(0,0,0,0.5);
padding: 40px;
font-family:sans-serif;
font-size: 20px;
color: white;
}
html {
background: url(img/bg4.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#submit {
border-radius: 5px;
background-color: rgba(0,0,0,0);
padding: 7px 7px 7px 7px;
box-shadow: inset -1px -1px rgba(0,0,0,0.5);
font-family:"Comic Sans MS", cursive, sans-serif;
font-size: 17px;
margin:auto;
margin-top: 20px;
display:block;
color: white;
}
#logintext {
text-align: center;
}
.data {
color: white;
}
</style>
<body>
<?php include("header.php") ?>
<div id="loginarea">
form id="login" action="login.php" onsubmit="return validate()"
<
method="post" name="login">
<div id="logintext">Login to Indian Railways!</div><br/><br/>
<table>
<tr><td><div class="data">Enter E-Mail ID:</div></td><td><input
type="text" id="email" size="30" maxlength="30" name="email"/></td></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><t
r></tr><tr></tr><tr></tr><tr></tr>
tr><td><div class="data">Enter Password:</div></td><td><input
<
type="password" id="pw" size="30" maxlength="30" name="pw"/></td></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><t
r></tr><tr></tr><tr></tr><tr></tr>
</table>
INPUT TYPE="Submit" value="Submit" name="submit" id="submit"
<
class="button">
/form></div>
<
</body>
</html>
Pnrstatus.php
<?php
session_start();
$conn = mysqli_connect("localhost","root","","railway");
if(!$conn){
cho "<script type='text/javascript'>alert('Database
e
failed');</script>";
die('Could not connect: '.mysqli_connect_error());
}
if (isset($_POST['submit']))
{
$pnr=$_POST['pnr'];
$sql = "SELECT t_status FROM tickets WHERE PNR= '$pnr'";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
if($row==NULL) echo "<script type='text/javascript'>alert('PNR not
found');</script>";
else echo "<script type='text/javascript'>alert('Your status is '
+'$row[t_status]');</script>";
}
if (isset($_POST['cancel']))
{
$pnr=$_POST['pnr'];
$sql = "DELETE FROM tickets WHERE PNR=$pnr;";
if(mysqli_query($conn, $sql))
echo "<script type='text/javascript'>alert('Your ticket has been
cancelled');</script>";
else echo "<script type='text/javascript'>alert('Cancellation
failed');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PNR Status</title>
<LINK REL="STYLESHEET" HREF="STYLE.CSS">
<style type="text/css">
#pnr {
font-size: 20px;
background-color: white;
width: 500px;
height: 300px;
margin: auto;
border-radius: 25px;
border: 2px solid blue;
margin: auto;
position: absolute;
left: 0;
right: 0;
padding-top: 40px;
padding-bottom:20px;
margin-top: 130px;
}
html {
background: url(img/bg7.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#pnrtext {
padding-top: 20px;
}
/style>
<
</head>
<body>
<?php
include("header.php"); ?>
<center>
<div id="pnr">Check your PNR status here:<br/><br/>
<form method="post" name="
pnrstatus" action="pnrstatus.php">
div id="pnrtext"><input type="text" name="pnr" size="30"
<
maxlength="10" placeholder="Enter PNR here"></div>
<br/><br/>
<input type="submit" name="submit" value="Check here!" class="button"
id="submit"><br/><br/>
<?php
if(isset($_SESSION['user_info'])){
echo '<form action="pnrstatus.php" method="post"><input
type="submit" class="button" value="Cancel your ticket!" name="cancel"
id="cancel"/></form>';
}
else
echo '<A HREF="register.php">Login/Register</A>';
>
?
/form>
<
/div>
<
</center>
</body>
</html>
Header.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="s1.css" type="text/css">
<style type="text/css">
li {
font-family: sans-serif;
font-size:18px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#Logout").hide();
};
$(document).ready(function(){
$("#user").hover(function(){
$("#Logout").toggle("slow");
});
});
</script>
</head>
<body l ink="white" alink="white" vlink="white">
<div class="container dark">
<div class="wrapper">
<div class="Menu">
<ul id="navmenu">
<li><A H REF="index.php">Home</A></li>
<li><A H REF="pnrstatus.php">PNR Status</A></li>
<li><a href="booktkt.php">Book a ticket</a></li>
<li><?php
if(isset($_SESSION['user_info'])){
echo '<div id="dropdown">'.$_SESSION['user_info'].'<div
id="Logout" style="display:none">Logout</div>';
}
else
echo '<A HREF="register.php">Login/Register</A>';
?>
/li>
<
</ul>
/div>
<
</div>
/div>
<
</body>
</html>
Deact.php
<html>
<head>
<title>Deactivate account</title>
<link rel="stylesheet" href="css/main.css">
rc="js/jquery-1.8.2.min.js"></script>
<script s
<script s rc="js/jquery.validate.min.js"></script>
<script src="js/main.js"></script>
ype="text/css">
<style t
a:link {color: #ffffff}
a:visited {color: #ffffff}
a:hover {color: #ffffff}
a:active {color: #ffffff}
</style>
</head>
<body>
<?php
session_start();
include("header.php"); ?>
<form id="login-form" class="login-form" name="form1" method="post"
action="deact.php">
<div id="form-content">
<div c
lass="welcome">
Do you sure you wish to deactivate your account?
<br />
Email ID: <input type="text" name="email"><br/>
Password: <input type="password"
name="password"><br/><br/><br/>
center><input type="submit" name="submit"
<
value="Deactivate account"></center>
</div>
</div>
</form>
</body>
</html>
<?php
if (isset($_POST['submit']))
{
$email=$_POST['email'];
$password=$_POST['password'];
$connect = mysql_connect("localhost","root","");
mysql_select_db("foodies") or die("couldn't find database");
$query = mysql_query("select * from php_users_login where
email='$email'");
$numrows = mysql_num_rows($query);
if($numrows!=0)
{
while($row = mysql_fetch_assoc($query))
{
$dbemail = $row['email'];
$dbpassword = $row['password'];
}
if($email==$dbemail&&$password==$dbpassword)
{
$sql1 ="DELETE FROM `php_users_login` WHERE email='$dbemail';";
f(mysql_query($sql1))
i
{
cho "<script type='text/javascript'>alert('User deleted
e
successfully');</script>";
}
else
{
cho "<script type='text/javascript'>alert('Could not delete
e
user');</script>";
}
}
else
echo "<script type='text/javascript'>alert('Incorrect
password');</script>";
}
else
echo "<script type='text/javascript'>alert('User does not
exist');</script>";
}
?>
Changepw.php
<html>
<head>
<title>Change password</title>
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500'
rel='stylesheet' type='text/css'>
<link
href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.cs
s" rel="stylesheet">
<script src="js/jquery-1.8.2.min.js"></script>
rc="js/jquery.validate.min.js"></script>
<script s
<script s rc="js/main.js"></script>
<style type="text/css">
a:link {color: #ffffff}
a:visited {color: #ffffff}
a:hover {color: #ffffff}
:active {color: #ffffff}
a
</style>
</head>
<body>
<?php
session_start();
include("header.php"); ?>
<form id="login-form" class="login-form" name="form1" method="post"
action="changepw.php">
<div i d="form-content">
<div class="welcome">
Do you want to change your password?
<br />
Email ID: <input type="text" name="email"><br/>
Current password: <input type="password"
name="opw"><br/>
New password: <input type="password"
name="npw"><br/><br/>
<center><input type="submit" name="changepw"
value="Change password"></center>
</div>
/div>
<
/form>
<
</body>
</html>
<?php
$connect = mysql_connect("localhost","root","");
mysql_select_db("foodies") or die("couldn't find database");
if (isset($_POST['changepw'])){
$email=$_POST['email'];
$opw=$_POST['opw'];
$npw=$_POST['npw'];
$query = mysql_query("select * from php_users_login where
email='$email'");
$numrows = mysql_num_rows($query);
if($numrows!=0)
{
while($row = mysql_fetch_assoc($query))
{
$dbemail = $row['email'];
$dbpassword = $row['password'];
}
if($dbemail==$email&&$opw==$dbpassword)
{
$sql2 ="UPDATE php_users_login SET password= '$npw' WHERE email=
'$dbemail';";
if(mysql_query($sql2))
{
echo "<script type='text/javascript'>alert('Password changed
successfully');</script>";
}
lse
e
{
cho "<script
e
type='text/javascript'>alert('Error');</script>";
}
}
else
echo "<script type='text/javascript'>alert('Incorrect
password');</script>";
}
else
echo "<script type='text/javascript'>alert('User does not
exist');</script>";
}
?>
Booktkt.php
<?php
session_start();
if(empty($_SESSION['user_info'])){
cho "<script type='text/javascript'>alert('Please login before
e
proceeding further!');</script>";
}
$conn = mysqli_connect("localhost","root","","railway");
if(!$conn){
echo "<script type='text/javascript'>alert('Database
failed');</script>";
die('Could not connect: '.mysqli_connect_error());
}
if (isset($_POST['submit']))
{
$trains=$_POST['trains'];
$sql = "SELECT t_no FROM trains WHERE t_name = '$trains'";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$email=$_SESSION['user_info'];
$query="UPDATE passengers SET t_no='$row[t_no]' WHERE email='$email';";
if(mysqli_query($conn, $query))
{
$message = "Ticket booked successfully";
}
else {
$message="Transaction failed";
}
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Book a ticket</title>
<LINK REL="STYLESHEET" HREF="STYLE.CSS">
<style type="text/css">
#booktkt {
margin:auto;
margin-top: 50px;
width: 40%;
height: 60%;
padding: auto;
padding-top: 50px;
padding-left: 50px;
background-color: rgba(0,0,0,0.3);
border-radius: 25px;
}
html {
background: url(img/bg7.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#journeytext {
color: white;
font-size: 28px;
font-family:"Comic Sans MS", cursive, sans-serif;
}
#trains {
margin-left: 90px;
font-size: 15px;
}
#submit {
margin-left: 150px;
margin-bottom: 40px;
margin-top: 30px
}
/style>
<
<script type="text/javascript">
function validate() {
var trains=document.getElementById("trains");
if(trains.selectedIndex==0)
{
alert("Please select your train");
trains.focus();
return false;
}
}
/script>
<
</head>
<body>
<?php
include ('header.php');
?>
<div id="booktkt">
<h1 align="center" id="journeytext">Choose your journey</h1><br/><br/>
<form method="post" name="journeyform" onsubmit="return validate()">
<select id="trains" name="trains" required>
<option selected disabled>-------------------Select trains
here----------------------</option>
<option value="rajdhani" >Rajdhani Express - Mumbai Central to
Delhi</option>
<option value="duronto" >Duronto Express - Mumbai Central to
Ernakulum</option>
<option value="geetanjali">Geetanjali Express - CST to
Kolkata</option>
<option value="garibrath" >Garib Rath - Udaipur to Jammu
Tawi</option>
<option value="mysoreexp" >Mysore Express - Talguppa to Mysore
Jn</option>
</select>
<br/><br/>
input type="submit" name="submit" id="submit" class="button" />
<
/form>
<
</div>
</body>
</html>
Register.php
<?php
session_start();
$conn = mysqli_connect("localhost","root","","railway");
if(!$conn){
cho "<script type='text/javascript'>alert('Database
e
failed');</script>";
die('Could not connect: '.mysqli_connect_error());
}
if (isset($_POST['submit']))
{
$fname=$_POST['fname'];
$lname=$_POST['lname'];
$age=$_POST['age'];
$mob=$_POST['mob'];
$gender=$_POST['gender'];
$email=$_POST['email'];
$pw=$_POST['pw'];
$cpw=$_POST['cpw'];
$sql = "INSERT INTO passengers (p_fname, p_lname, p_age, p_contact,
p_gender, email, password) VALUES ('$fname', '$lname', '$age', '$mob',
'$gender', '$email', '$pw');";
if(mysqli_query($conn, $sql))
{
$message = "You have been successfully registered";
}
else
{
$message = "Could not insert record";
}
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<HTML>
<HEAD>
<TITLE>Register on Indian Railways</TITLE>
<LINK REL="STYLESHEET" HREF="STYLE.CSS">
<style type="text/css">
* {
color: #222;
}
#register_form {
background-color: white;
width: 40%;
margin: auto;
border-radius: 25px;
border: 2px solid blue;
margin-top: 25px;
}
#nav {
olor: white;
c
}
#logintext {
margin-top: 10px;
}
#login {
margin-top: 10px;
margin-bottom: 20px;
}
</style>
<SCRIPT src="validation.js"></SCRIPT>
</HEAD>
<BODY background="img/wallpaper1.jpg" link="white" alink="white"
vlink="white" width="1024" height="768">
<?php include("header.php") ?>
<div id="register_form" align="center" height="200" width="200">
<FORM name="register" method="post" action="register.php" onsubmit="return
validate()">
<TABLE border="0">
<CAPTION><FONT size="6" color="WHITE"><br/>Enter your
details:</FONT></CAPTION>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">First name:</FONT></TD>
<TD><INPUT name="fname" type="TEXT" placeholder="Enter your first name"
size="30" maxlength="30" align="center" id="fname"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">Last name:</FONT></TD>
<TD><INPUT type="TEXT" name="lname" align="center" size="30"
maxlength="30" placeholder="Enter your last name" id="lname"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">Age:</FONT></TD>
<TD><INPUT type="TEXT" name="age" align="center" size="30" maxlength="3"
placeholder="Enter age" id="age"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">Mobile Number:</FONT></TD>
<TD><INPUT type="TEXT" name="mob" size="30" maxlength="10"
placeholder="Enter your mobile number" id="mob"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TR class="left">
<TD><FONT size="5" color="WHITE">Gender:</FONT></TD>
<TD>
<INPUT type="radio" name="gender" value="Male" align="center"
id="gender">Male
&n
bsp;
<input type="radio" name="gender" value="Female" align="center"
id="gender">Female
</TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">E-Mail ID:</FONT></TD>
ame="email" type="TEXT" id="email" placeholder="Enter your
<TD><INPUT n
E-Mail ID" s ize="30" maxlength="30"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">Password:</FONT></TD>
<TD><INPUT type="PASSWORD" name="pw" size="30" id="pw"></TD>
</TR><tr></tr><tr></tr>
<TR class="left">
<TD><FONT size="5" color="WHITE">Confirm Password:</FONT></TD>
<TD><INPUT type="PASSWORD" name="cpw" size="30" id="cpw"></TD>
</TR><tr></tr><tr></tr><tr></tr><tr></tr>
<tr></tr><tr></tr><tr></tr>
</TABLE>
<P><INPUT TYPE="Submit" value="Submit" name="submit" id="submit"
class="button" onclick="if(!this.form.tc.checked){alert('You must agree to
the terms first.');return false}">      
<INPUT TYPE="Reset" value="Reset" id="reset"
class="button"></P></FORM><br/>
<HR width="450" style="border-color: blue;display: block;" noshade>
<FORM action="login.php">
<P align="CENTER" id="logintext"><FONT size="6" color="white"
face="Arial">
Already have an account with us?<BR/></FONT></FONT>
<INPUT TYPE="submit" value="Login" id="login" class="button">
</P>
</FORM></div>
</BODY>
</HTML>
val
Valivadtion.js
function validate()
{
var f name=document.getElementById("fname");
var l name=document.getElementById("lname");
var a ge=document.getElementById("age");
var m ob=document.getElementById("mob");
var E mailId=document.getElementById("email");
var p w=document.getElementById("pw");
var c pw=document.getElementById("cpw");
var a lphaExp = /^[a-zA-Z]+$/;
var a tpos = EmailId.value.indexOf("@");
var d otpos = EmailId.value.lastIndexOf(".");
f(fname.value==null || fname.value=="")
i
{
fname.focus();
alert("Enter valid first name");
return false;
}
if(fname.value.match(alphaExp)){}
else{
alert("First name can have only letters");
fname.focus();
return false;
}
f(lname.value==null || lname.value=="")
i
{
lname.focus();
alert("Enter valid last name");
return false;
}
if(lname.value.match(alphaExp)){}
else{
alert("Last name can have only letters");
lname.focus();
return false;
}
f(age.value==null || age.value=="")
i
{
alert("Please Enter Age");
age.focus();
return false;
}
if (isNaN(age.value))
{
alert(" Your Age must be Integer");
age.focus();
return false;
}
if(mob.value==null || mob.value==" ")
{
alert("Please Enter Mobile Number");
mob.focus();
return false;
}
if (isNaN(mob.value))
{
alert(" Your Mobile Number must be Integers");
mob.focus();
return false;
}
if((mob.value.length!= 10))
{
alert("Enter the valid Mobile Number(Like : 9669666999)");
mob.focus();
return false;
}
f (atpos<1 || dotpos<atpos+2 || dotpos+2>=EmailId.value.length)
i
{
alert("Enter valid email-ID");
EmailId.focus();
return false;
}
f(pw.value.length< 8 || cpw.value.length< 8)
i
{
alert("Please enter a password of atleast 8 characters");
pw.focus();
return false;
}
lse if (pw.value.length != cpw.value.length)
e
{
alert("Passwords do not match.");
pw.focus();
return false;
}
else if (pw.value != cpw.value)
{
alert("Passwords do not match.");
pw.focus();
return false;
}
return true;
}
Main.js
var jQuery_1_8_2 = $.noConflict();
(function ($, undefined) {
$(function () {
var form = $('#login-form');
if (form.length > 0) {
form.validate({
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
},
onkeyup: false,
errorClass: "err",
wrapper: "em"
});
}
var groups = $('.group', form).filter(function(){
return !$(
this).hasClass('submit');
}).click(function(){
$(groups).removeClass('active');
$(this).addClass('active');
});
$('#name').trigger('click').trigger('focus');
});
})(jQuery_1_8_2);
Main.css
*{ font-family: 'Roboto', sans-serif; }
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1 px;
border: 0 ;
border-top: 1 px solid #ccc;
margin: 1em 0 ;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
fieldset {
border: 0 ;
margin: 0 ;
padding: 0;
}
textarea {
resize: vertical;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
ackground: #333333 url(../img/background.jpg) no-repeat center bottom
b
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-weight: 300;
}
.login-form {
margin: 50px auto;
background: white;
padding: 30px 0;
position: relative;
-webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
height: 400px;
}
.login-form #form-loading {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1000;
background: #555555;
}
.login-form #form-loading i {
font-size: 100px;
}
.login-form #form-message {
text-align: center;
color: #555555;
}
.login-form .h1 {
font-size: 30px;
color: #3EC038;
padding: 15px 15px 35px 15px;
text-transform: uppercase;
text-align: center;
}
.login-form .logo {
height: auto;
max-width: 100%;
}
.login-form .group {
*zoom: 1;
-webkit-transition: all ease .2s;
transition: all ease .2s;
border-left: 4px solid #fff;
padding: 10px 0;
}
.login-form .group:before,
.login-form .group:after {
content: " ";
display: table;
}
.login-form .group:after {
clear: both;
}
.login-form .group > label {
padding-left: 15px;
padding-top: 5px;
color: #555555;
font-size: 16px;
display: block;
}
.login-form .group > label.empty {
display: block;
height: 1px;
padding: 0;
margin: 0;
}
.login-form .group > div {
padding: 0 15px;
}
.login-form .group > div.addon-right {
position: relative;
padding-right: 50px;
}
.login-form .group > div.addon-right > i {
position: absolute;
right: 25px;
top: 9px;
z-index: 999;
color: #555555;
}
.login-form .group > div .error-message {
font-size: 12px;
color: red;
margin-top: 5px;
}
.login-form .group.active {
background: #F6F6F6;
border-left-color: #40C2FF;
-webkit-box-shadow: inset 0 px 0 px 3px r gba(0, 0, 0, 0.03);
box-shadow: inset 0px 0px 3 px r gba(0, 0 , 0, 0.03);
}
.login-form input[type=submit] {
border: none;
background: #65CA60;
color: white;
padding: 5px 20px;
text-transform: uppercase;
font-weight: 500;
border-radius: 1px;
-webkit-box-shadow: i nset 0 1 px 1px r gba(0, 0, 0, 0.075);
box-shadow: inset 0 1 px 1px r gba(0, 0 , 0, 0.075);
-webkit-transition: background ease-in-out .15s;
transition: background ease-in-out .15s;
cursor:pointer;
}
.login-form input[type=button] {
border: none;
background: #65CA60;
color: white;
padding: 5px 20px;
text-transform: uppercase;
font-weight: 500;
border-radius: 1px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1
px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: b ackground ease-in-out .15s;
transition: background ease-in-out .15s;
cursor:pointer;
}
.login-form input[type=submit]:hover {
background: #5AC253;
}
.login-form {
width: 320px;
}
@media (min-width: 550px) {
.login-form {
width: 520px;
}
.login-form .group > label {
float: left;
width: 180px;
}
.login-form .group > div {
margin-left: 180px;
padding-left: 0;
}
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
background-color: #ffffff;
background-image: n one;
border: 1px solid # cccccc;
border-radius: 1px;
-webkit-box-shadow: i nset 0 1 px 1px r gba(0, 0, 0, 0.075);
box-shadow: inset 0 1 px 1px r gba(0, 0 , 0, 0.075);
webkit-transition: border-color ease-in-out .15s, box-shadow
-
ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,
175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
233, 0.6);
}
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eeeeee;
opacity: 1;
}
textarea.form-control {
height: auto;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.one-line {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.arrow-up {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.arrow-down {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.arrow-right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.arrow-left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
.arrow {
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-color: white;
border-width: 5 px;
border-style: s olid;
}
.arrow.up {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.arrow.down {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.arrow.right {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.arrow.left {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
label.err {
color: red;
display: block;
margin: 0;
width: auto;
}
em {
display: block;
margin: 5px 0 0px 180px;
font-style: inherit;
}
.welcome{
line-height: 50px;
padding-left:30px;
color: #555555;
}
1. Registration form
Code -
Index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<meta n ame="viewport" content="width=device-width, user-scalable=no">
<link r el="stylesheet" href="fv.css" type="text/css" />
!--[if IE]>
<
<style>
.field .tooltip .content{ display:none; opacity:1; }
.field .tooltip:hover .content{ display:block; }
</style>
<![endif]-->
</head>
<body>
<div i d='wrap'>
<div class='options'>
</div>
<h1 title='how forms should be done.'>Registration</h1>
<section class='form'>
<form action="" method="post" novalidate>
<fieldset>
<div class="field">
<label>
<span>Name</span>
<input data-validate-length-range="6"
data-validate-words="2" n
ame="name"/>
/label>
<
/div>
<
<div c lass="field">
<label>
<span>Gender</span>
<input type="radio" id="male" name="gender"
value="male">
<label f or="male">Male</label><br>
<input t ype="radio" id="female"
name="gender" value="female">
<label for="female">Female</label><br>
</div>
<div c lass="field">
<label>
<span>Age</span>
<select name="birth-year">
<option v alue="2018">2018</option>
<option v alue="2017">2017</option>
<option v alue="2016">2016</option>
<option v alue="2015">2015</option>
<option v alue="2014">2014</option>
<option v alue="2013">2013</option>
<option v alue="2012">2012</option>
<option v alue="2011">2011</option>
<option v alue="2010">2010</option>
<option v alue="2009">2009</option>
<option v alue="2008">2008</option>
<option v alue="2007">2007</option>
<option value="2006">2006</option>
<option v alue="2005">2005</option>
<option v alue="2004">2004</option>
<option v alue="2003">2003</option>
<option v alue="2002">2002</option>
<option v alue="2001">2001</option>
<option v alue="2000">2000</option>
<option v alue="1999">1999</option>
<option v alue="1998">1998</option>
<option v alue="1997">1997</option>
<option v alue="1996">1996</option>
<option v alue="1995">1995</option>
<option v alue="1994">1994</option>
<option v alue="1993">1993</option>
<option v alue="1992">1992</option>
<option v alue="1991">1991</option>
<option v alue="1990">1990</option>
<option v alue="1989">1989</option>
<option v alue="1988">1988</option>
<option v alue="1987">1987</option>
<option v alue="1986">1986</option>
<option value="1985">1985</option>
<option v alue="1984">1984</option>
<option v alue="1983">1983</option>
<option v alue="1982">1982</option>
<option v alue="1981">1981</option>
<option v alue="1980">1980</option>
<option v alue="1979">1979</option>
<option v alue="1978">1978</option>
<option v alue="1977">1977</option>
</select>
</label>
</div>
<div class="field">
<label>
<span>Occupation</span>
input class='optional' name="occupation"
<
data-validate-length-range="5,15" type="text" />
/label>
<
/div>
<
<div class="field">
<label>
<span>Email</span>
input name="email" class='email'
<
required="required" t
ype="email" />
/label>
<
/div>
<
<div c lass="field">
<label>
<span>Password</span>
<input type="password" name="password"
data-validate-length="6,8" required='required'>
</label>
/div>
<
/div>
<
<div c lass="field">
<label>
<span>Repeat password</span>
<input type="password" name="password2"
data-validate-linked='password' required='required'>
</label>
</div>
<div class="field">
<label>
<span>City</span>
<input data-validate-length-range="20"
data-validate-words="1" name="city"/>
</label>
</div>
<div class="field">
<label>
<span>Address</span>
input type="textarea" class='address'
<
name="confirm_address" required='required'>
/label>
<
/div>
<
<div c lass="field">
<label>
<span>Phone</span>
<input type="tel" class='tel' name="phone"
required='required' data-validate-length-range="8,20">
</label>
<div class='tooltip help'>
/div>
<
/div>
<
<div c lass="field">
<label>
<span>Fax</span>
<input type="tel" class='fax' name="fax"
required='required' data-validate-length-range="8,20">
</label>
/div>
<
/fieldset>
<
<button t ype='submit'>Submit</button>
<button t ype='reset'>Reset</button>
/form>
<
/section>
<
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s
cript>
<script src="multifield.js"></script>
<script src="validator.js"></script>
<script>
/ initialize a validator instance from the "FormValidator"
/
constructor.
/ A "<form>" element is optionally passed as an argument, but is
/
not a must
var v
alidator = new FormValidator({"events" : ['blur', 'input',
'change']}, d ocument.forms[0]);
// on form "submit" event
document.forms[0].onsubmit = function(e){
var submit = true,
validatorResult = validator.checkAll(this);
console.log(validatorResult);
return !!validatorResult.valid;
};
// on form "reset" event
document.forms[0].onreset = function(e){
validator.reset();
};
// stuff related ONLY for this demo page:
$('.toggleValidationTooltips').change(function(){
validator.settings.alerts = !this.checked;
if( this.checked )
$('form .alert').remove();
}).prop('checked',false);
/script>
<
</body>
</html>
Style.css
html, body{ height:100%; }
/* body min-width is 992px because it's 960px grid + extra 16px from each
side of the header */
body{ min-width:960px; color:#444; background-color:#F1F1F1;
font-size:12px; line-height:1.5em; font-family:Arial, Helvetica,
sans-serif; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, b
lockquote, pre,
abbr, address, cite, code, d el, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, t
body, tfoot, thead, tr, th, t
d,
article, aside, c anvas, details, figcaption, f igure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
small{ font-size:0.9em; }
article, aside, d
etails, figcaption, figure,
footer, header, h group, menu, nav, section {
display:block;
}
h1{ font-size:2em; margin:0 0 50px 0; }
button{ cursor:pointer; }
p{ padding:5px 0; }
a{ text-decoration:none; }
.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid
rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px
#00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC;
background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0,
0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s;
transition:0.15s; }
.btn:hover{ background:#0068BA; }
.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px
#00329B inset, 0 0 6px #00243F inset; }
.btn.github{ float:right; }
#wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto;
border:1px dashed #AAA; position:relative; }
.options{ position:absolute; top:-1px; right:-1px;
background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA;
border-bottom:1px dashed #AAA; }
.options label{ cursor:pointer; margin:0 10px; }
input, textarea{ border:1px solid #D1D1D1; }
input, select{ font-size:inherit; margin:0; }
input:focus, textarea:focus{ border-color:#AAA; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none;
margin:0; }
input[type=checkbox]{ width:auto; border:none; bottom:-1px;
cursor:pointer; margin:2px 8px 0 0; position:relative;
transform:scale(1.2); }
button{ font-size:1.1em; padding:5px 25px; }
/* Tooltips helpers */
.field .tooltip{ float:left; top:2px; left:7px; position:relative;
z-index:2; }
.field .tooltip:hover{ z-index:3; }
.field .tooltip > span{ display:inline-block; width:15px; height:15px;
line-height:15px; font-size:0.9em; font-weight:bold; text-align:center;
color:#FFF; cursor:help; background-color:#00AEEF; position:relative;
border-radius:10px; }
.field .tooltip .content{ opacity:0; width:200px;
background-color:#333; color:#FFF; font-size:0.9em; position:absolute;
top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none;
transition:0.2s cubic-bezier(0.1, 0 .1, 0.25, 2); -webkit-transition:0.3s
cubic-bezier(0.1, 0.2, 0.5, 2.2); - moz-transition:0.3s cubic-bezier(0.1,
0.2, 0.5, 2.2); }
.field .tooltip p{ padding:0; }
.field .tooltip.down .content{ left:auto; right:0; top:30px; }
.field .tooltip:hover .content{ opacity:1; left:36px; }
.field .tooltip .content b{ height:0; width:0; border-color:#333
#333 transparent transparent; border-style:solid; border-width:9px 7px;
position:absolute; left:-14px; top:8px; }
field .tooltip.down .content b{ left:auto; right:6px; top:-10px;
.
border-width:5px; border-color:transparent #333 #333 transparent; }
/* alerts (when validation fails) */
.field .alert{ float:left; margin:-2px 0 0 2
0px; padding:3px 10px;
color:#FFF; border-radius:3px 4px 4px 3px; b ackground-color:#CE5454;
max-width:170px; white-space:pre; position:relative; left:-15px;
opacity:0; z-index:1; transition:0.15s ease-out; }
.field .alert::after{ content:''; display:block; height:0; width:0;
border-color:transparent #CE5454 transparent transparent;
border-style:solid; border-width:11px 7px; position:absolute; left:-13px;
top:1px; }
.field.bad .alert{ left:0; opacity:1; }
@keyframes shake{
15%{ transform:translateX(-5px); }
ransform:translateX(5px); }
30%{ t
45%{ t ransform:translateX(-3px); }
ransform:translateX(3px); }
60%{ t
75%{ t ransform:translateX(2px); }
100%{ transform:none; }
}
@-webkit-keyframes shake{
25%{ -webkit-transform:translateX(-6px); }
75%{ -webkit-transform:translateX(6px); }
}
form fieldset{ clear:both; margin:0 0 10px 0; }
field{ padding:5px 0; position:relative; height:2em; }
form .
form . field.fields{ height:auto; }
.field label, .field .label{ cursor:pointer; }
.field label > span:first-child, .field .label{ float:left;
width:160px; text-transform:capitalize; line-height:2em; }
.field input, .field textarea{ float:left; padding:3px 4px;
width:210px; -webkit-transition:0.2s; -moz-transition:0.2s;
transition:0.2s; }
.field input[type=checkbox]{ width:auto; }
.label ~ label{ vertical-align:middle; margin:0.3em 1.2em 0 0; }
.field input.short{ width:90px; }
field input:focus:not([type="checkbox"]), .field textarea:focus{
.
box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
.field t extarea{ }
.field s elect{ float:left; width:220px; padding:2px 0; margin:0;
border:1px solid #CCC; text-transform:capitalize; }
.field select option{ padding:1px; }
.field > .extra{ float:left; font-size:0.9em; color:#999;
line-height:2em; margin-left:13px; }
.field.multi .input{ float:left; }
.field.multi input{ float:left; margin-right:5px; width:35px;
text-align:center; }
orm .field.multi input:nth-last-child(-n+2){ margin:0; }
f
.field.fields input{ border-top:5px solid #E1E1E1; margin:0 0 0
160px;
}
.bad i nput,
.bad s elect,
bad t
. extarea{ border:1px solid # CE5454; box-shadow:0 0 4px -2px
#CE5454; p osition:relative; left:0; - moz-animation:.4s 1 shake ease;
-webkit-animation:0.4s 1 shake ease; }
/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------
- */
.mode2 .field{ float:left; clear:left; margin-bottom:30px; height:auto;
padding:0; zoom:1; }
field.bad{ margin-bottom:8px; }
.mode2 .
.mode2 . field::before, .mode2 .field::after{ content:''; display:table; }
.mode2 .field::after{ clear:both; }
.mode2 .field label{ }
.mode2 .field label span{ float:none; display:block;
line-height:inherit; }
.mode2 .field input:not(type="checkbox"), .field textarea{
width:250px; margin:0; }
.mode2 .field textarea{ width:350px; margin:0; }
.mode2 . field select{ width:260px; float:none; }
.mode2 . field.multi label{ float:none; }
mode2 .field.multi input{ float:left; margin-right:5px; width:35px;
.
text-align:center; }
mode2 .field .tooltip{ left:auto; position:absolute; right:-22px;
.
top:19px; }
.mode2 . field . alert::after{ display:none; }
.mode2 . field . alert{ float:none; clear:left; margin:0; padding:0 5px;
border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em;
}
.mode2 .field > .extra{ position:absolute; right:0; }
Validate.js
/*
Validator v3.3.7
(c) Yair Even Or
https://github.com/yairEO/validator
*/
;(function(root, factory){
var d efine = define || {};
if( t ypeof define === 'function' && define.amd )
define([], factory);
lse if( typeof exports === 'object' && typeof module === 'object' )
e
module.exports = factory();
lse if(typeof exports === 'object')
e
exports["FormValidator"] = factory();
else
root.FormValidator = factory();
}(this, function(){
// More information at: https://gist.github.com/dperini/729294
var urlRegex = new RegExp(
"^" +
"(?:(?:(?:https?|ftp):)?\\/\\/)" +
"(?:\\S+(?::\\S*)?@)?" +
"(?:" +
"(?!(?:10|127)(?:\\.\\d{1,3}){3})" +
"(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})" +
"(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})" +
"(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" +
"(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" +
"(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" +
"|" +
"(?:" +
"(?:" +
"[a-z0-9\\u00a1-\\uffff]" +
"[a-z0-9\\u00a1-\\uffff_-]{0,62}" +
")?" +
"[a-z0-9\\u00a1-\\uffff]\\." +
")+" +
"(?:[a-z\\u00a1-\\uffff]{2,}\\.?)" +
")" +
"(?::\\d{2,5})?" +
"(?:[/?#]\\S*)?" +
$", "i"
"
);
function FormValidator( settings, formElm ){
this.data = {}; // holds the form fields' data
this.DOM = {
scope : formElm
};
this.settings = this.extend({}, this.defaults, settings || {});
this.texts = this.extend({}, this.texts, this.settings.texts ||
{});
this.settings.events && this.events();
}
FormValidator.prototype = {
// Validation error texts
texts : {
invalid input is not as expected',
: '
short : ' input is too short',
long input is too long',
: '
empty : ' please put something here',
select Please select an option',
: '
number_min : ' too low',
number_max too high',
: '
address : ' invalid address',
number not a number',
: '
email : ' email address is invalid',
email_repeat : 'emails do not match',
password_repeat : ' passwords do not match',
no_match no match',
: '
complete : ' input is not complete'
},
// default settings
defaults : {
alerts : t
rue,
events : false,
regex : {
url rlRegex,
: u
phone : /^\+?([0-9]|[-|' '])+$/i,
numeric : /^[0-9]+$/i,
alphanumeric : /^[a-zA-Z0-9]+$/i,
time : /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/,
email : {
illegalChars : /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
filter : /^.+@.+\..{2,24}$/ // exmaple email
"[email protected]"
}
},
classes : {
item : 'field',
alert : '
alert',
bad : 'bad'
}
},
// Tests (per type)
/ each test return "true" when passes and a string of error text
/
otherwise
tests : {
sameAsPlaceholder : function( field, data ){
if( field.getAttribute('placeholder') )
return data.value != field.getAttribute('placeholder')
|| this.texts.empty;
else
return true;
},
hasValue : function( value ){
return value ? true : this.texts.empty;
},
/ 'linked' is a special test case for inputs which their
/
values should be equal to each other (ex. confirm email or retype
password)
linked : function(a, b, type){
if( b != a ){
// choose a specific message or a general one
eturn this.texts[type + '_repeat'] ||
r
this.texts.no_match;
}
return true;
},
email : function(field, data){
if ( !this.settings.regex.email.filter.test( data.value )
|| data.value.match( this.settings.regex.email.illegalChars ) ){
return this.texts.email;
}
return true;
},
// a "skip" will skip some of the tests (needed for keydown
validation)
text : function(field, data){
var that = this;
/ make sure there are at least X number of words, each at
/
least 2 chars long.
/ for example 'john F kenedy' should be at least 2 words
/
and will pass validation
if( data.validateWords ){
var words = data.value.split(' ');
// iterate on all the words
var wordsLength = function(len){
for( v ar w = words.length; w--; )
if( words[w].length < len )
eturn that.texts.short;
r
eturn true;
r
};
if( words.length < data.validateWords ||
!wordsLength(2) )
return this.texts.complete;
return true;
}
if( data.lengthRange && data.value.length <
data.lengthRange[0] ){
return this.texts.short;
}
// check if there is max length & field length is greater
than the allowed
f( d
i ata.lengthRange && data.lengthRange[1] &&
data.value.length > d ata.lengthRange[1] ){
return this.texts.long;
}
// check if the field's value should obey any length
limits, and if so, make sure the length of the value is as specified
if( data.lengthLimit && data.lengthLimit.length ){
while( data.lengthLimit.length ){
if( data.lengthLimit.pop() == data.value.length ){
return true;
}
}
return this.texts.complete;
}
if( data.pattern ){
var regex = this.settings.regex[data.pattern];
if( !regex )
regex = data.pattern;
try{
var jsRegex = new RegExp(regex).test(data.value);
if( data.value && !jsRegex ){
return this.texts.invalid
}
}
catch(err){
console.warn(err, field, 'regex is invalid');
return this.texts.invalid
}
}
return true;
},
number : function( field, data ){
var a = data.value;
// if not not a number
if( isNaN(parseFloat(a)) && !isFinite(a) ){
return this.texts.number;
}
// not enough numbers
else if( data.lengthRange && a.length <
data.lengthRange[0] ){
return this.texts.short;
}
// check if there is max length & field length is greater
than the allowed
else if( data.lengthRange && data.lengthRange[1] &&
a.length > data.lengthRange[1] ){
return this.texts.long;
}
else if( data.minmax[0] && (a|0) < data.minmax[0] ){
return this.texts.number_min;
}
else i f( data.minmax[1] && (a|0) > data.minmax[1] ){
return this.texts.number_max;
}
return true;
},
// Date is validated in European format (day,month,year)
date : function( field, data ){
var day, A = data.value.split(/[-./]/g), i;
// if there is native HTML5 support:
if( field.valueAsNumber )
return true;
for( i = A.length; i--; ){
if( isNaN(parseFloat( data.value )) &&
!isFinite(data.value) )
return this.texts.date;
}
try{
day = new Date(A[2], A[1]-1, A[0]);
if( day.getMonth()+1 == A[1] && day.getDate() == A[0]
)
eturn true;
r
return this.texts.date;
}
catch(er){
return this.texts.date
}
},
time : function( field, data ){
var p attern = this.settings.regex.time;
if( p attern.test(data.value) )
eturn true;
r
lse
e
return this.texts.time
},
url : function( field, data ){
if( !this.settings.regex.url.test(data.value) )
return this.texts.url;
return true
},
hidden : function( field, data ){
if( d
ata.lengthRange && data.value.length <
data.lengthRange[0] )
return this.texts.short;
if( data.pattern ){
if( data.pattern == 'alphanumeric' &&
!this.settings.regex.alphanumeric.test(data.value) )
return this.texts.invalid;
}
return true
},
select : function( field, data ){
return data.value ? true : this.texts.select;
},
checkbox : function( field, data ){
if( field.checked ) return true;
return this.texts.checked
}
},
/**
* bind events on form elements
* @param {Array/String} types [description]
* @param {Object} formElm [optional - form element, if one
is not already defined on the instance]
* @return {[type]} [description]
*/
events : function( types, formElm ){
var that = this;
types = types || this.settings.events;
formElm = formElm || this.DOM.scope;
if( !formElm || !types ) return;
if( types instanceof Array )
types.forEach(bindEventByType);
lse if( typeof types == 'string' )
e
bindEventByType(types)
function bindEventByType( type ){
formElm.addEventListener(type, function(e){
hat.checkField(e.target)
t
}, true);
}
},
/**
* Marks an field as invalid
* @param {DOM Object} field
param {
* @ String} text
* @ return { String} - useless string (should be the DOM node added
for warning)
*/
mark : function( f ield, text ){
if( !text || !field )
return false;
var that = this;
// check if not already marked as 'bad' and add the 'alert'
object.
// if already is marked as 'bad', then make sure the text is
set again because i might change depending on validation
var item = this.closest(field, '.' +
this.settings.classes.item) || field,
alert =
item.querySelector('.'+this.settings.classes.alert),
warning;
if( this.settings.alerts ){
if( alert )
alert.innerHTML = text;
else{
warning = '<div class="'+ this.settings.classes.alert
+'">' + text + '</div>';
item.insertAdjacentHTML('beforeend', warning);
}
}
item.classList.remove(this.settings.classes.bad);
// a delay so the "alert" could be transitioned via CSS
setTimeout(function(){
item.classList.add( that.settings.classes.bad );
});
return warning;
},
* un-marks invalid fields
/
*/
unmark : function( field ){
var warning;
if( !field ){
console.warn('no "field" argument, null or DOM object not
found');
return false;
}
ar fieldWrap = this.closest(field, '.' +
v
this.settings.classes.item);
if( fieldWrap ){
arning = fieldWrap.querySelector('.'+
w
this.settings.classes.alert);
fieldWrap.classList.remove(this.settings.classes.bad);
}
if( warning )
warning.parentNode.removeChild(warning);
},
/**
* removes unmarks all fields
* @return {[type]} [description]
*/
reset : f
unction( formElm ){
var f ieldsToCheck,
that = this;
formElm = formElm || this.DOM.scope;
fieldsToCheck = this.filterFormElements( formElm.elements );
fieldsToCheck.forEach(function(elm){
that.unmark(elm);
});
},
/**
* Normalize types if needed & return the results of the test (per
field)
* @param {String} type [form field type]
param {
* @ *} value
* @ return { Boolean} - validation test result
*/
testByType : function( field, data ){
data = this.extend({}, data); // clone the data
var type = data.type;
if( type == 'tel' )
data.pattern = data.pattern || 'phone';
if( !type || type == 'password' || type == 'tel' || type ==
'search' || type == 'file' )
type = 'text';
return this.tests[type] ? this.tests[type].call(this, field,
rue;
data) : t
},
prepareFieldData : function( field ){
var nodeName = f
ield.nodeName.toLowerCase(),
id = Math.random().toString(36).substr(2,9);
field["_validatorId"] = id;
this.data[id] = {};
this.data[id].value ield.value.replace(/^\s+|\s+$/g, "");
= f
// cache the value of the field and trim it
his.data[id].valid
t = true;
// initialize validity of field
his.data[id].type
t = field.getAttribute('type');
// every field starts as 'valid=true' until proven otherwise
this.data[id].pattern = field.getAttribute('pattern');
// Special treatment
if( nodeName === "select" )
this.data[id].type = "select";
else i f( nodeName === "textarea" )
this.data[id].type = "text";
/* Gather Custom data attributes for specific validation:
*/
this.data[id].validateWords =
field.getAttribute('data-validate-words') || 0;
his.data[id].lengthRange
t =
field.getAttribute('data-validate-length-range') ?
(field.getAttribute('data-validate-length-range')+'').split(',') : [1];
this.data[id].lengthLimit =
field.getAttribute('data-validate-length') ?
(field.getAttribute('data-validate-length')+'').split(',') : false;
his.data[id].minmax
t =
field.getAttribute('data-validate-minmax') ?
(field.getAttribute('data-validate-minmax')+'').split(',') : false;
// for type 'number', defines the minimum and/or maximum for the value as
a number.
this.data[id].validateLinked =
field.getAttribute('data-validate-linked');
return this.data[id];
},
/**
* Find the closeset element, by selector
param
* @ {Object} e l [DOM node]
* @ param {String} s elector [CSS-valid selector]
* @return {Object} [Found element or null if not found]
*/
closest : function(el, selector){
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector
','oMatchesSelector'].some(function(fn){
if( typeof document.body[fn] == 'function' ){
matchesFn = fn;
return true;
}
return false;
})
// traverse parents
while (el) {
if (el && el[matchesFn](selector))
return el;
el = el.parentElement
}
return null;
},
/**
* MDN polyfill for Object.assign
*/
extend : function( target, varArgs ){
if( !target )
throw new TypeError('Cannot convert undefined or null to
object');
var to = Object(target),
nextKey, nextSource, index;
for( i ndex = 1; index < arguments.length; index++ ){
nextSource = arguments[index];
if( nextSource != null ) // Skip over if undefined or null
for( nextKey in nextSource )
// Avoid bugs when hasOwnProperty is shadowed
f(
i
Object.prototype.hasOwnProperty.call(nextSource, nextKey) )
to[nextKey] = nextSource[nextKey];
}
return to;
},
* Checks a single form field by it's type and specific (custom)
/
attributes
* {DOM Object} - the field to be checked
* {Boolean} silent - don't mark a field and only return if it
passed the validation or not
*/
checkField : function( field, silent ){
/ skip testing fields whom their type is not HIDDEN but they
/
are HIDDEN via CSS.
if( field.type !='hidden' && !field.clientWidth )
return { valid:true, error:"" }
field = this.filterFormElements( [field] )[0];
// if field did not pass filtering or is simply not passed
if( !field )
return { v
alid:true, error:"" }
// this.unmark( field );
var linkedTo,
testResult,
optional = field.className.indexOf('optional') != -1,
data = this.prepareFieldData( field ),
orm = this.closest(field, 'form'); // if the field is
f
part of a form, then cache it
// check if field has any value
* Validate the field's value is different than the
/
placeholder attribute (and attribute exists)
* this is needed when fixing the placeholders for older
browsers which does not support them.
*/
// first, check if the field even has any value
testResult = this.tests.hasValue.call(this, data.value);
// if the field has value, check if that value is same as
placeholder
if( testResult === true )
testResult = this.tests.sameAsPlaceholder.call(this,
field, data );
data.valid = optional || testResult === true;
if( optional && !data.value ){
return { valid:true, error:"" }
}
if( testResult !== true )
data.valid = false;
// validate by type of field. use 'attr()' is proffered to get
the actual value and not what the browsers sees for unsupported types.
if( data.valid ){
testResult = this.testByType(field, data);
data.valid = t
estResult === true ? true : false;
}
/ if this field is linked to another field (their values
/
should be the same)
if( data.valid && data.validateLinked ){
if( data['validateLinked'].indexOf('#') == 0 )
inkedTo =
l
document.body.querySelector(data['validateLinked'])
else i f( form.length )
linkedTo = form.querySelector('[name=' +
data['validateLinked'] + ']');
else
inkedTo = document.body.querySelector('[name=' +
l
data['validateLinked'] + ']');
testResult = this.tests.linked.call(this, field.value,
linkedTo.value, data.type );
data.valid = testResult === true ? true : false;
}
if( !silent )
this[data.valid ? "unmark" : "mark"]( field, testResult );
// mark / unmark the field
return {
valid : data.valid,
error : data.valid === true ? "" : testResult
};
},
/**
* Only allow certain form elements which are actual inputs to be
validated
param {
* @ HTMLCollection} form fields Array [description]
* @ return { Array} [description]
*/
filterFormElements : function( fields ){
var i,
fieldsToCheck = [];
for( i = fields.length; i--; ) {
ar isAllowedElement =
v
fields[i].nodeName.match(/input|textarea|select/gi),
isRequiredAttirb = fields[i].hasAttribute('required'),
isDisabled = fields[i].hasAttribute('disabled'),
isOptional = fields[i].className.indexOf('optional')
!= -1;
if( isAllowedElement && (isRequiredAttirb || isOptional)
&& !isDisabled )
fieldsToCheck.push(fields[i]);
}
return fieldsToCheck;
},
checkAll : function( formElm ){
if( !formElm ){
console.warn('element not found');
return false;
}
var that = this,
result = {
valid : true, // overall form validation flag
fields : [] // array of objects (per form field)
},
fieldsToCheck = this.filterFormElements( formElm.elements
);
// get all the input/textareas/select fields which are
required or optional (meaning, they need validation only if they were
filled)
fieldsToCheck.forEach(function(elm, i){
var fieldData = that.checkField(elm);
// use an AND operation, so if any of the fields returns
'false' then the submitted result will be also FALSE
result.valid = !!(result.valid * fieldData.valid);
result.fields.push({
field : elm,
error : fieldData.error,
valid : !!fieldData.valid
})
});
return result;
}
}
return FormValidator;
}));
You might also like
- T.Y.B.B.A. (CA) Sem VI Practical Slips 2019 Pattern100% (2)T.Y.B.B.A. (CA) Sem VI Practical Slips 2019 Pattern30 pages
- 313 41 - Web Technology - Part 1 5 Marks XML (Extensible Markup Language)No ratings yet313 41 - Web Technology - Part 1 5 Marks XML (Extensible Markup Language)60 pages
- Build A Full Featured Login System With PHPNo ratings yetBuild A Full Featured Login System With PHP31 pages
- Week1 (A) : Date: Aim: Write A Timetable Program For 3 Year B.Tech IT Branch. SourcecodeNo ratings yetWeek1 (A) : Date: Aim: Write A Timetable Program For 3 Year B.Tech IT Branch. Sourcecode86 pages
- JMCT Polytechnic, Nasik: Department of Computer EngineeringNo ratings yetJMCT Polytechnic, Nasik: Department of Computer Engineering15 pages
- To Enhance The Aesthetics of Your Online Banking SystemNo ratings yetTo Enhance The Aesthetics of Your Online Banking System16 pages
- Tvl-Ict-Css: Quarter 2 - Module 5-8: Setting Up Computer ServersNo ratings yetTvl-Ict-Css: Quarter 2 - Module 5-8: Setting Up Computer Servers20 pages
- Management Information Systems Lecture NotesNo ratings yetManagement Information Systems Lecture Notes65 pages
- Deployment and Best Practices Guide For Data ONTAP 8.1 Cluster-Mode Windows File ServicesNo ratings yetDeployment and Best Practices Guide For Data ONTAP 8.1 Cluster-Mode Windows File Services37 pages
- ISTQB CTFL v4.0 Sample-Exam-A-Answers v1.1No ratings yetISTQB CTFL v4.0 Sample-Exam-A-Answers v1.138 pages
- Amazon EMR Security: © 2018, Amazon Web Services, Inc. or Its Affiliates. All Rights ReservedNo ratings yetAmazon EMR Security: © 2018, Amazon Web Services, Inc. or Its Affiliates. All Rights Reserved16 pages
- Creating A Simple PHP and MySQL-Based Login SystemNo ratings yetCreating A Simple PHP and MySQL-Based Login System14 pages
- Techexpressway Sap S4abap Coursemap Latest PDF Model2No ratings yetTechexpressway Sap S4abap Coursemap Latest PDF Model21 page
- Management Information Systems: Managing The Digital Firm, 12e Authors: Kenneth C. Laudon and Jane P. LaudonNo ratings yetManagement Information Systems: Managing The Digital Firm, 12e Authors: Kenneth C. Laudon and Jane P. Laudon40 pages
- Zero Trust Architecture: Securing The Digital Frontier: Presenter: Eng. Mohamed Adel Abdallah 2 October 2024No ratings yetZero Trust Architecture: Securing The Digital Frontier: Presenter: Eng. Mohamed Adel Abdallah 2 October 202457 pages
- Online Application and Document Submission Procedure For AdmissionNo ratings yetOnline Application and Document Submission Procedure For Admission11 pages
- Ca4C Rt11 - System Analysis & Software EngineeringNo ratings yetCa4C Rt11 - System Analysis & Software Engineering2 pages
- Question One INF1512 Introduction To Software Engineering: EC2 TD1/TD2 2020/2021No ratings yetQuestion One INF1512 Introduction To Software Engineering: EC2 TD1/TD2 2020/20212 pages
- System Engineer Roles and ResponsibilitiesNo ratings yetSystem Engineer Roles and Responsibilities2 pages
- Knowledge Base Article: 000187008: Onefs: Error When Copying Files Using The Isi - Vol - Copy - VNX Utility (000187008)No ratings yetKnowledge Base Article: 000187008: Onefs: Error When Copying Files Using The Isi - Vol - Copy - VNX Utility (000187008)2 pages
