How to create custom validation in jquery?
Define Custom Jquery Validation Method Example: for the custom validation with jquery and CSS, most important is the first need to value of the field, which field you want to validate then use to condition if value will be blank then show error, so need to insert error message with .insertAfter('selector') method. For the more description see below code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Field validation</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.conatiner {
max-width: 600px;
margin: 30px auto 50px;
background: #eee;
padding: 50px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 10px;
}
.form-group {
margin-bottom: 25px;
width: 100%;
display: inline-block;
position: relative;
margin-right: 30px;
}
.form-group label {
display: block;
margin: 0 0 2px 0;
}
.form-group .form-control {
border-top: 1px solid #999;
border-bottom: 1px solid #ddd;
border-left: 1px solid #999;
border-right: 1px solid #ddd;
padding: 4px 12px;
height: 40px;
width: 100%;
display: inline-block;
box-sizing: border-box;
font-size: 16px;
color: #2d2d2d
}
.form-group .form-control:focus {
outline: none;
}
.validateBtn {
background: #0bf;
color: #fff;
text-align: center;
display: inline-block;
font-size: 20px;
border-radius: 4px;
padding: 10px 20px;
border: 0;
cursor: pointer;
text-transform: uppercase;
transition: all 0.5s;
margin-bottom: 30px;
}
.validateBtn:focus {
outline: none;
}
.validateBtn:hover {
background: #0b6;
transition: all 0.5s;
}
.error {
border: 1px solid #f00 !important;
}
[class^=tooltip] {
position: absolute;
font-size: 13px;
text-align: center;
left: 0;
color: #f00;
padding: 3px 0;
font-family: Arial, Helvetica, sans-serif;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="fName" id="fName" />
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lName" id="lName" required />
</div>
<div class="text-center">
<button id="validate" class="validateBtn">Validate</button>
</div>
<div class="fullName">
<div><span id="fresult"></span> <span id="lresult"></span> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(function () {
jQuery('#validate').click(function () {
var fName = jQuery('#fName').val();
var lName = jQuery('#lName').val();
if (fName != '') {
jQuery('#fName').removeClass('error');
jQuery('.tooltip1').remove();
} else {
jQuery('#fName').addClass('error');
jQuery('<div class="tooltip1">Enter your full Name</div>').insertAfter('#fName');
}
if (lName != '') {
jQuery('#lName').removeClass('error');
jQuery('.tooltip2').remove();
} else {
jQuery('#lName').addClass('error');
jQuery('<div class="tooltip2">Enter your last name</div>').insertAfter('#lName');
}
if (fName != '' && lName != '') {
jQuery('#fresult').html('Your full name is: <strong>' + fName + '</strong>');
jQuery('#lresult').html('<strong>' + lName + '</strong>');
jQuery("html,body").animate({ scrollTop: jQuery(".fullName").offset().top - 10 }, "slow");
}
});
});
</script>
</body>
</html>
Result will be as attached screenshot -
No comments:
Note: Only a member of this blog may post a comment.