Here, we will see how to create checkbox validation in jquery using prop() method. The checkbox indicates the status of the terms and conditions in registration forms. It offers the user a number of choices that can be toggled “on” and “off.” We can also set the remarks to checkbox whether it is selected or not. Follow the below example to create this.
Example:
Add the below snippet to your html file to create checkbox validation in registration forms.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox Validation In Jquery With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
body{margin: 20px;}
h1{
color: green;
}
h5{
color: green;
}
h2{
color: green;
}
p{
color: red;
}
b{
color: blue;
font-size: 38px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-6 align-items-center">
<div>
<h2> Registration Form </h2><br> <br>
<label> Enter Your Name : </label>
<input type="textbox" value="" name='name1'> <br> <br><tr>
</div>
<div>
<label> Enter Your Email: </label>
<input type="email" value="" name='name2'> <br> <br>
</div>
<div>
<label> Enter Your Password: </label>
<input type="password" value="" name='name3'> <br> <br>
</div>
<div>
<p class='form-group' id=terms_condition>
<input type=checkbox value=yes name='terms_condition' id='terms'>
I Agree to <a href='#' >Terms & Conditions </a> <br> <br>
</p>
<div id=msg_terms name=msg_terms>
</div>
<input type="button" id="btn" value="Register">
</div>
</div>
</div>
</body>
<script>
$(document).ready (function () {
my_function_terms=function my_function_terms(status,str){
if (status=='NOTOK'){
$('#terms_condition').css (
{
"border-color": "red",
"border-width":"1px",
"border-style":"solid",
"padding":"10px 10px 0 10px"
}
);
}
else
{
$('#terms_condition').css (
{
'border-color': '',"border-width":"0px"
}
);
}
$('#msg_terms').html (str);
}
$("#terms").change (function ()
{
var ckb_status = $("#terms").prop('checked');
if(ckb_status)
{
my_function_terms ("OK"," Thanks for Registration...........");
}
else
{
my_function_terms("NOTOK","You must agree to terms and conditions before submit the form");
}
});
$("#btn").click (function (event)
{
var ckb_status = $("#terms").prop('checked');
if (ckb_status)
{
my_function_terms("OK","Thanks .. ");
}
else
{
my_function_terms("NOTOK", "please agree the terms and conditions before submit the form");
}
})
});
</script>
</html>
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example