I have written a code for displaying the values entered in two input text boxes in jquery. How to check whether the text boxes are filled with values or not ? I have done with change function to display the values entered from the text input boxes to be displayed inside the html.I want to validate whether the input boxes is being filled with values in jquery. How to check that ? I have only checked when it is inputted with values.
Javscript:
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);
});
});
</script>
html:
<input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span>
<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span>
Use input instead of change
$("input").on('input',function(){
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);
});
HERE is the DEMO
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
Since You are storing the value of the text input in a variable ,So you can directly check if the value is empty or not , using comparison like below
if((startDate =="")||(endDate == ""))
{
alert("Please Fill both text Boxes")
}
You can use if condition to check whether variable is empty or not. Please refer below code for more details.
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
if($.trim(startDate) == ""){
alert("Please enter start date.");
}else if($.trim(endDate) == ""){
alert("Please enter end date.");
}else {
$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);
});
}
});
});
</script>
Try this:
<script type="text/javascript">
$(document).ready(function(){
$("input").on('input keyup',function(){
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
$("#result").html("Rental Date<span> From:"+startDate+" To:"+endDate);
});
});
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span>
<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span>
<div id="result"></div>
</body>
</html></div>
The most easiest way is to use regular expressions. And also if you want to immediately show input values then consider event keyup instead change, cause change event firing only after field lost a focus.
So, said this, your JS might looking as:
$(document).ready(function(){
$("input").keyup(function(){
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
var regexp = new new RegExp("\\d\\d, \\d\\d \\d"); // based on data-date-format atribute of input fields
if(!regexp.test(startDate)){
alert("Please enter start date.");
} else if(!regexp.test(endDate)){
alert("Please enter end date.");
} else {
$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);
}
});
});