Joel Mathews
Reputation: 7
Validation for empty input fields using jquery
I again encountered a problem for jquery form validation(related to empty input fields), I have three input fields, one for the first name, last name and date of birth, when I click submit button it does not show a warning message for the date of birth. The success.php file contains only a message "Registration Successful !". Here is my HTML code.
<!DOCTYPE html>
<html>
<head id="html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<style >
#first-name{
width: 300px;
margin-top: 10px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#last-name{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#date-of-birth{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#sign-up-button{
width: 200px;
margin-top: 10px;
margin-left: 560px;
font-size: 18px;
border-radius: 50px;
}
#first-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#last-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#dob-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<form id="sign-up" action="success.php" method="post">
<div id="row-one">
<input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15">
</div>
<div id="span-container">
<span id="first-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-two">
<input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15">
</div>
<div id="span-container">
<span id="last-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-three">
<input class="date-picker" id="date-of-birth" name="user_dob" placeholder="Date Of Birth" readonly="true">
</div>
<div id="span-container">
<span id="dob-warning-message" class="text-danger"> </span>
</div>
<div id="row-four">
<button id="sign-up-button" class="btn btn-primary" type="submit"> Sign Up </button>
</div>
</form>
<script>
$(document).ready(function(){
$('#first-name-warning-message').hide();
$('#last-name-warning-message').hide();
$('#dob-warning-message').hide();
var first_name_error=false;
var last_name_error=false;
var dob_error=false;
$('#first-name').focusout(function(){
validate_first_name();
});
$('#last-name').focusout(function(){
validate_last_name();
});
$('#date-of-birth').focusout(function(){
validate_date_of_birth();
});
function validate_first_name(){
var first_name=$('#first-name').val();
var first_name_regex=/^[a-zA-Z ]{3,15}$/;
if(first_name.length==''){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("Please Enter Your First Name !");
first_name_error=true;
}
else if(first_name.length<3){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Not Valid !");
first_name_error=true;
}
else if(!first_name_regex.test(first_name)){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !");
first_name_error=true;
}
else{
$('#first-name-warning-message').hide();
}
}
function validate_last_name(){
var last_name=$('#last-name').val();
var last_name_regex=/^[a-zA-Z ]{3,15}$/;
if(last_name.length==''){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Please Enter Your Last Name !");
last_name_error=true;
}
else if(last_name.length<3){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Not Valid !");
last_name_error=true;
}
else if(!last_name_regex.test(last_name)){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !");
last_name_error=true;
}
else{
$('#last-name-warning-message').hide();
}
}
function validate_date_of_birth(){
$("#date-of-birth").datepicker({
dateFormat:'yy-mm-dd',
changeMonth: true,
changeYear: true,
onClose: function validate_date_of_birth(selectedDate){
var date_of_birth=selectedDate;
if(date_of_birth.length==''){
$('#dob-warning-message').html("Please Enter Your Date Of Birth !");
$('#dob-warning-message').show();
dob_error=true;
}
else{
$('#dob-warning-message').hide();
}
}
});
}
$('#sign-up').submit(function(){
first_name_error=false;
last_name_error=false;
dob_error=false;
validate_first_name();
validate_last_name();
validate_date_of_birth();
if((first_name_error==false)&&(last_name_error==false)&&(dob_error==false)){
return true;
}
else{
return false;
}
});
});
</script>
</body>
</html>Upvotes: 0
Views: 1082
Answers (1)
Mert Aşan
Reputation: 436
if($("#date-of-birth").datepicker("getDate") === null)
<!DOCTYPE html>
<html>
<head id="html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<style >
#first-name{
width: 300px;
margin-top: 10px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#last-name{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#date-of-birth{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#sign-up-button{
width: 200px;
margin-top: 10px;
margin-left: 560px;
font-size: 18px;
border-radius: 50px;
}
#first-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#last-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#dob-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<form id="sign-up" action="success.php" method="post">
<div id="row-one">
<input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15">
</div>
<div id="span-container">
<span id="first-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-two">
<input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15">
</div>
<div id="span-container">
<span id="last-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-three">
<input class="date-picker" id="date-of-birth" name="user_dob" placeholder="Date Of Birth" readonly="true">
</div>
<div id="span-container">
<span id="dob-warning-message" class="text-danger"> </span>
</div>
<div id="row-four">
<button id="sign-up-button" class="btn btn-primary" type="submit"> Sign Up </button>
</div>
</form>
<script>
$(document).ready(function(){
$('#first-name-warning-message').hide();
$('#last-name-warning-message').hide();
$('#dob-warning-message').hide();
var first_name_error=false;
var last_name_error=false;
var dob_error=false;
$('#first-name').focusout(function(){
validate_first_name();
});
$('#last-name').focusout(function(){
validate_last_name();
});
$('#date-of-birth').focusout(function(){
validate_date_of_birth();
});
function validate_first_name(){
var first_name=$('#first-name').val();
var first_name_regex=/^[a-zA-Z ]{3,15}$/;
if(first_name.length==''){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("Please Enter Your First Name !");
first_name_error=true;
}
else if(first_name.length<3){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Not Valid !");
first_name_error=true;
}
else if(!first_name_regex.test(first_name)){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !");
first_name_error=true;
}
else{
$('#first-name-warning-message').hide();
}
}
function validate_last_name(){
var last_name=$('#last-name').val();
var last_name_regex=/^[a-zA-Z ]{3,15}$/;
if(last_name.length==''){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Please Enter Your Last Name !");
last_name_error=true;
}
else if(last_name.length<3){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Not Valid !");
last_name_error=true;
}
else if(!last_name_regex.test(last_name)){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !");
last_name_error=true;
}
else{
$('#last-name-warning-message').hide();
}
}
function validate_date_of_birth(){
if($("#date-of-birth").datepicker("getDate") === null) {
$('#dob-warning-message').html("Please Enter Your Date Of Birth !");
$('#dob-warning-message').show();
dob_error=true;
}
else {
$('#dob-warning-message').hide();
}
return false;
}
$("#date-of-birth").datepicker({
dateFormat:'yy-mm-dd',
changeMonth: true,
changeYear: true
});
$('#sign-up').submit(function(){
first_name_error=false;
last_name_error=false;
dob_error=false;
validate_first_name();
validate_last_name();
validate_date_of_birth();
if((first_name_error==false)&&(last_name_error==false)&&(dob_error==false)){
return true;
}
else{
return false;
}
});
});
</script>
</body>
</html>Upvotes: 1
Related Questions
- Check if inputs are empty using jQuery
- Show validation error when an input field is empty
- JS validation indicator for empty inputs
- jQuery show div for empty input fields (validation)
- jQuery validation not working when input fields are empty
- How to validate empty input boxes from a form in jQuery
- jQuery validate if input not empty
- Check if inputs are empty using jQuery before submitting
- How can I use jQuery to check all inputs for blanks?
- jquery validation for empty text input