<!DOCTYPE html>
<html>
<head>
<title>jQuery form validation</title>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
<style>
body{
font-family:Verdana;
font-size:13px;
}
#form_container{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
h2{
text-align:center;
}
.error{
color:#f00;
}
#form_container span{
float:right;
display:block;
clear:both;
}
#form_container label{
display:block;
float:left;
margin:5px 0;
width:150px;
}
#form_container input{
float:right;
margin:5px 0;
}
#form_container input[type="submit"]{
float:left;
margin:8px 0 0 254px;
}
</style>
</head>
<body>
<h2>Fill up form and hit submit</h2>
<div id="form_container">
<form id="reg_form" action="" method="post">
<label>First Name</label>
<input type="text" name="f_name" placeholder="First Name"/>
<span id="fnameInfo"></span>
<label>Last Name</label>
<input type="text" name="l_name" placeholder="Last Name"/>
<span id="lnameInfo"></span>
<label>Email</label>
<input type="text" name="email" placeholder="Email"/>
<span id="mailInfo"></span>
<label>Phone Number</label>
<input type="text" name="phone" placeholder="Phone"/>
<span id="phoneInfo"></span>
<input type="submit" value="Submit"/>
</form>
</div>
<script>
$(document)
.ready(function () {
$('#reg_form')
.submit(function () {
if (validateTextField('f_name', 'fnameInfo') & validateTextField('l_name', 'lnameInfo') & validateEmail('email', 'mailInfo') & validateNumber('phone', 'phoneInfo')) {
return true;
} else {
return false;
}
});
function validateTextField(fieldName, Id) {
//if it's NOT valid
if ($('input[name=' + fieldName + ']')
.val()
.length < 1) {
$('#' + Id)
.text('Please enter any text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
} else if (isNaN($('input[name=' + fieldName + ']')
.val()) == false){
$('#' + Id)
.text('Please enter any text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
return true;
}
}
function validateEmail(fieldName, Id) {
//testing regular expression
var a = $('input[name=' + fieldName + ']')
.val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if (filter.test(a)) {
//$('#'+fieldName).removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
//if it's NOT valid
else {
$('#' + Id)
.text('Please Type a valid e-mail address');
$('#' + Id)
.addClass('error');
return false;
}
}
function validateNumber(fieldName, Id) {
//if it's NOT valid
if (isNaN($('input[name=' + fieldName + ']')
.val())) {
$('#' + Id)
.text('Only number please,no text allowed');
$('#' + Id)
.addClass('error');
return false;
} else if ($('input[name=' + fieldName + ']')
.val() < 1){
$('#' + Id)
.text('Please fill the field').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
}
});
</script>
</body>
</html>
<html>
<head>
<title>jQuery form validation</title>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
<style>
body{
font-family:Verdana;
font-size:13px;
}
#form_container{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
h2{
text-align:center;
}
.error{
color:#f00;
}
#form_container span{
float:right;
display:block;
clear:both;
}
#form_container label{
display:block;
float:left;
margin:5px 0;
width:150px;
}
#form_container input{
float:right;
margin:5px 0;
}
#form_container input[type="submit"]{
float:left;
margin:8px 0 0 254px;
}
</style>
</head>
<body>
<h2>Fill up form and hit submit</h2>
<div id="form_container">
<form id="reg_form" action="" method="post">
<label>First Name</label>
<input type="text" name="f_name" placeholder="First Name"/>
<span id="fnameInfo"></span>
<label>Last Name</label>
<input type="text" name="l_name" placeholder="Last Name"/>
<span id="lnameInfo"></span>
<label>Email</label>
<input type="text" name="email" placeholder="Email"/>
<span id="mailInfo"></span>
<label>Phone Number</label>
<input type="text" name="phone" placeholder="Phone"/>
<span id="phoneInfo"></span>
<input type="submit" value="Submit"/>
</form>
</div>
<script>
$(document)
.ready(function () {
$('#reg_form')
.submit(function () {
if (validateTextField('f_name', 'fnameInfo') & validateTextField('l_name', 'lnameInfo') & validateEmail('email', 'mailInfo') & validateNumber('phone', 'phoneInfo')) {
return true;
} else {
return false;
}
});
function validateTextField(fieldName, Id) {
//if it's NOT valid
if ($('input[name=' + fieldName + ']')
.val()
.length < 1) {
$('#' + Id)
.text('Please enter any text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
} else if (isNaN($('input[name=' + fieldName + ']')
.val()) == false){
$('#' + Id)
.text('Please enter any text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
return true;
}
}
function validateEmail(fieldName, Id) {
//testing regular expression
var a = $('input[name=' + fieldName + ']')
.val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if (filter.test(a)) {
//$('#'+fieldName).removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
//if it's NOT valid
else {
$('#' + Id)
.text('Please Type a valid e-mail address');
$('#' + Id)
.addClass('error');
return false;
}
}
function validateNumber(fieldName, Id) {
//if it's NOT valid
if (isNaN($('input[name=' + fieldName + ']')
.val())) {
$('#' + Id)
.text('Only number please,no text allowed');
$('#' + Id)
.addClass('error');
return false;
} else if ($('input[name=' + fieldName + ']')
.val() < 1){
$('#' + Id)
.text('Please fill the field').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
}
});
</script>
</body>
</html>
0 comments:
Post a Comment