Validating input date field - javascript

How do you validate for a valid & empty input type=date field? I want to make sure that my date of birth field should not be = today's date or any date of today. Here are my codes
HTML
<label for="dob">Date of Birth:</label>
<input type="date" name="dob" id="dob" max="21/11/2017" required/>
JavaScript
else if (dob == "") {
alert("Please enter a date of birth");
$("#dob").focus();
validate = false;
}
The validation for the empty field doesn't work even though I use the same method for the other fields in my form.

The format must be
yyyy-mm-dd
<label for="dob">Date of Birth:</label>
<input type="date" name="dob" id="dob" max="2017-11-21" required/>
Cross-browser way
Here's an example from developer.mozilla.org
https://jsfiddle.net/api/mdn/

You can use typeof($("#dob").val())==='undefined'
else if (typeof($("#dob").val())==='undefined') {
alert("Please enter a date of birth");
$("#dob").focus();
validate = false;
}

Related

Bootstrap Date Picker Validation

Hey guys I am working on a project that requires validation of the date picker to check whether the end date is greater than or equal to the start date! Can anyone help me with how to write jquery for it so that I can disable the dates based on the user's date selection restricting him/her to choose the dates within the starting and ending range entered by the user?
The code looks like this:
<div class="mb-4">
<label for="startdate" class="form-label">StartDate</label>
<input type="date" class="form-control" id="startdate" name="startdate" />
</div>
<div class="mb-4">
<label for="enddate" class="form-label">End Date</label>
<input type="date" class="form-control" id="enddate" name="enddate" />
</div>
I'm not sure how to disable inside picker dates that are higher than the startDate, but like this you can do a validation
var startDate = new Date($('#startdate').val());
var endDate = new Date($('#enddate').val());
if (startDate < endDate){
// Do something
}

Input type date - date range same for every year

I have a contact form with 2 inputs of type date. I've set min and max date but they are set for the current year only. Is there a way to put the selected date range for every year?
https://jsfiddle.net/3akf49jr/
HTML
<form>
<label for="">Arrival date</label>
<input type="date" name="" min="2019-09-01" max="2019-10-01" id="minDate">
<label for="">Departure date</label>
<input type="date" name="" max="2019-10-01" id="maxDate">
</form>
JS
document.getElementById('minDate').onchange = function () {
document.getElementById('maxDate').setAttribute('min', this.value);
};
I also have a script that restricts dates in the second field based on a selected date in the first date field. I would like that functionality to remain.

Attempting to use moment.js for date validation. Error message won't display

I am attempting to make a simple registration form in Javascript and I'm trying to use moment.js for date validation. So far my username validation and password validation all work however I can't seem to get my date validation to work. I saw other threads on here asking about date validation and most people suggested to use moment.js for it. That is where I am stuck. I am just trying to get the form to check if the date is in the valid MM-DD-YYYY format. Any help would be appreciated.
I also seem to get a Depreication warning and I'm not sure what to do about that.
function validateform() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var dob = document.getElementById('dob');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
if(username.value.length < 8){
alert("Username must be at least 8 characters");
form.username.focus();
return false;
}
if (password.value.length < 8) {
alert("Password must be at least 8 characters");
form.password.focus();
return false;
}
}
function vailddatecheck(dateString) {
var dateforvailidation = dateString.value;
var isVaild = moment(dateforvailidation, 'MM-DD-YYYY' , true).isVaild();
if (isVaild) {
return true;
}
else {
alert("Date must be in MM-DD-YYYY format");
form.dob.focus();
return false;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Totally Legit Registration Page</title>
<link href="Mod4style.css" rel="stylesheet">
</head>
<body>
<form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
<input type="text" id="username" placeholder="User Name">
<p class="error"></p>
<input type="password" id="password" placeholder="Password">
<p class="error"></p>
<input type="firstname" id="firstname" placeholder="First Name">
<p class="error"></p>
<input type="lastname" id="lastname" placeholder="Last Name">
<p class="error"></p>
<input type="dob" id="dob" placeholder="Date of Birth" onchange="vailddatecheck(this)">
<p class="error"></p>
<input type="email" id="email" placeholder="Email">
<p class="error"></p>
<input type="phone" id="phone" placeholder="Phone Number">
<p class="error"></p>
<button type="Submit">Submit</button>
<button type="Reset">Reset</button>
</form>
<script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0/moment.min.js"></script>
<script>
moment("dateforvailidation").format();
</script>
</html>
As #putvande mentioned in comment you need to call isValid not isVaild.
Not sure why you want to call validate function on change of date input, you can call it as other validations on submit in your validateform function.
or you can wrap this code in your vailddatecheck function and call it in validateform.
let isVaild = moment(dob.value, 'MM-DD-YYYY' , true).isValid()
if (!isVaild)
{
alert("Date must be in MM-DD-YYYY format");
form.dob.focus();
return false;
}
Per moment's documentation:
Moment's parser is very forgiving, and this can lead to
undesired/unexpected behavior.
For example, the following behavior can be observed:
moment('2016 is a date', 'YYYY-MM-DD').isValid() //true, 2016 was matched
You may want to try HTML input's date type, however it will always display date in browser locale and will work only in browsers that support it.

How to validate Html5 date in javascript as systemdate

I have input type=date
<input type="Date" name="todate" id="to">
in HTML
How to validate the date to systemdate and before the current date it must be unavailable to click.I need to validate in Js Please provide answers
That is my solution, first change the following html tag:
<input type="Date" name="todate" id="to">
To
<input type="Date" name="todate" id="to" onchange="checkit(this)">
The javascript function as follow:
function checkit(v)
{
var now=new Date();
now.setHours(0);
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
var userInput=new Date(v.value);
userInput.setHours(0);
userInput.setMinutes(0);
userInput.setSeconds(0);
userInput.setMilliseconds(0);
if (userInput.getTime()<now.getTime())
{
alert("User input date OLDER current date");
}
else
{
alert("User input date NOT older current date");
}
}

How to set HTML5 Form min restriction for datepicker to "Check-In Date (user input)"

What do I need to add for the min restriction to make sure the user-input for check-out date is after the user-input for check-in date?
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout"><br>
</form>
Can this be done with just HTML5 or does it need to include javascript?
java script need for validation .Compare the check in date is less the check out date
function check() {
if(document.getElementById('checkin').value < document.getElementById('checkout').value)
{ console.log('ok')}
else{
console.log('Not allowed')
}
}
<form>
Enter Check-In Date:<br>
<input type="date" id="checkin" name="checkin"><br>
Enter Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" onchange="check()"><br>
</form>
You can use min and max attributes of HTML5 input date
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin" max="2016-11-06"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout" min="2016-11-07"><br>
</form>
Where date of max in "checkin" is smaller than date of min in "checkout".
Or try validation in javascript.
document.getElementById("2").disabled = true;
$("#1").on("change paste keyup", function() {
console.log($(this).val());
var testDate= $(this).val();
var date_regex = /^\d{4}-\d{2}-\d{2}$/;
if((date_regex.test(testDate)))
document.getElementById("2").disabled = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin" id="1"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout" id="2"><br>
</form>

Categories

Resources