Develop Reference

How to validate an input type=date field and display an error messages whether the field is empty or if it does not match the regex

I have been trying for days to create a function that validates if the input type=Date is not empty and that the Date is formatted correctly. I want the following logic and actions:
If the field is empty, display an error message: "* is required"
If the field is formatted incorrectly meaning it does not meet this criterion: yyyy-mm-dd and 'mm' does not exceed 12 and 'dd' does not exceed 31 then display an error message "* invalid date"
Here is my code thus far:
HTML
<!-- Date of Birth -->
<label for="dateOfBirth">Date of Birth</label>
<span id="dateOfBirthErr" class="Error">*</span>
<br>
<input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')"
onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />
JS
// Date of Birth Validation
function dateOfBirthValdiate () {
let dateOfBirth = document.forms["registrationForm"]["dateOfBirth"];
let dateOfBirthErr = document.getElementById("dateOfBirthErr");
const dateFormat = /^\d{4}[\-\/\s]?((((0[13578])|(1[02]))[\-\/\s]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\-\/\s]?(([0-2][0-9])|(30)))|(02[\-\/\s]?[0-2][0-9]))$/;
if (dateOfBirth.value == "") {
dateOfBirth.style.border = "2px solid red";
dateOfBirthErr.innerHTML = "* is required";
} else if (dateOfBirth.value.match(dateFormat)) {
dateOfBirth.style.border = "1px solid #ccc";
dateOfBirthErr.innerHTML = "*";
} else {
dateOfBirth.style.border = "2px solid red";
dateOfBirthErr.innerHTML = "invalid date"
}
}
I am new to RegEx so the issue be with my this code, however, when I test it in other code snippets it seems to work fine. I appreciate any help!

for starters I see that you are using input type=text but talking about input type=date.
So if you want to use input type=date change this:
<input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />
to:
<input type="date" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />
And you don't have to check if date if properly formatted.
Buuut if you want to use input text then here I created function to check if data is filled and correct:
HTML :
<form class="" action="index.html" method="post" id="form">
<input type="date" name="" value="" id="date">
<input type="text" name="" value="" id="dateText">
<input type="submit" name="" value="">
</form>
JS:
function isDate(date) {
return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
}
document.getElementById('form').addEventListener("submit", e => {
e.preventDefault();
var date = document.getElementById('date');
var dateText = document.getElementById('dateText');
console.log("Date : " + date.value);
console.log("dateText : " + dateText.value);
if (date.value == "" || dateText.value == "") {
console.log("* is required");
e.preventDefault();
} else {
console.log("Dates filled.");
}
if (isDate(dateText.value) && !dateText.value.match("/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/")) {
console.log("* invalid date, required format yyyy-mm-dd");
e.preventDefault();
} else {
console.log("Correct Date");
}
})
If you want more then look here and choose your favorite solution.

How to keep session storage for all form inputs after submission?

How to save all the values from customer? I can only save first name and last name. Can I pass more than 2 inputs in set details? I tried adding date of birth that had input type text in dd/mm/yyyy format but the value was being shown as "undefined".
Java Script
function getDetails(){
if (typeof(Storage)!=="undefined"){
if (sessionStorage.getItem("firstName") !== null){
document.getElementById("firstName").value = sessionStorage.getItem("firstName");
}
if (sessionStorage.getItem("lastName") !== null){
document.getElementById("lastName").value = sessionStorage.getItem("lastName");
}
}
}
function setDetails(firstName, lastName) {
if (typeof(Storage)!=="undefined"){
sessionStorage.setItem("firstName", firstName);
sessionStorage.setItem("lastName", lastName);
}
}
HTML Code
<label for="firstName">First Name</label>
<br>
<input type="text" name="firstName" id="firstName" placeholder= "Enter first name" title="20 characters" />
<br>
<label for="lastName">Last Name</label>
<br>
<input type="text" name="lastName" id="lastName" placeholder= "Enter last name" class="field" required pattern="([A-z]){1,20}" title="20 characters" />
<br>
<label for="dob">Date of Birth</label>
<br>
<input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="\d{1,2}\/\d{1,2}\/\d{4}"/>

Below code will work to set & get "dob" in cookie:
<html>
<body>
<label for="dob">Date of Birth</label>
<br>
<input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="\d{1,2}\/\d{1,2}\/\d{4}"/>
<button onclick = "setDateInCookie();">SetCookie</button>
<button onclick = "getDateFromCookie();">GetCookie</button>
<script>
function setDateInCookie(){
var myDate = document.getElementById("dob").value;
if(typeof(Storage)!=="undefined")
sessionStorage["myDate"] = myDate;
}
function getDateFromCookie(){
var myDate = document.getElementById("dob").value;
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.getItem("myDate") !== null){
document.getElementById("dob").value = sessionStorage.getItem("myDate");
}
}
}
</script>
</body>
</html>
Future Note: Avoid using input type "text" for input type "date". Use the exact input types for not getting any issues in future.

Calculate date from months form

On my form, I have three fields.
Date of Issue
Validity Period (Months)
Expiry Date
I would like if you enter the date of issue and the validity period fields, The expiry date field to calculate and fill itself. How can I achieve this? The validity period may vary. Thanks in advance.
<div class="tarehe" data-validate = "Date of Issue is required">Date of Issue
<input class="inputpekee" type="date" name="issue_date" placeholder="Date of Issue">
</div>
<div class="tarehe" data-validate = "Validity Period is required">
<input class="inputpekee" type="number" name="validity" placeholder="Validity Period(Months)" min="1" max="60">
</div>
<div class="tarehe" data-validate = "Expiry Date is required">Expiry Date
<input class="inputpekee" type="date" name="expiry_date" placeholder="Expiry Date">
</div>
I expect the format to be dd/mm/yyyy

Here's a way using moment.js
let dateOfIssue = moment();
let validityMonths = 48;
let expiryDate = moment(dateOfIssue).add(validityMonths, 'months');
let el = document.getElementById('expiryDate');
el.innerHTML = expiryDate.format('DD/MM/YYYY');
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</head>
<body>
<p id="expiryDate"></p>
</body>
</html>

No need any library JS can do this easy, just learn documentation :
get Date Value ( valueAsDate ) => https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement
DateTimeFormat => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
example :
const FormOption = { day: '2-digit', month: '2-digit', year: 'numeric' };
document.getElementById('My-Form').onsubmit = function(evt) {
evt.preventDefault();
console.log('issue_date : ', new Intl.DateTimeFormat('fr-FR', FormOption).format(this.issue_date.valueAsDate) );
console.log('expiry_date : ',new Intl.DateTimeFormat('fr-FR', FormOption).format(this.expiry_date.valueAsDate) );
}
<form id="My-Form">
<label class="tarehe" data-validate="Date of Issue is required">Date of Issue
<input class="inputpekee" type="date" name="issue_date" placeholder="Date of Issue">
</label>
<label class="tarehe" data-validate="Validity Period is required">
<input class="inputpekee" type="number" name="validity" placeholder="Validity Period(Months)" min="1" max="60">
</label>
<label class="tarehe" data-validate="Expiry Date is required">Expiry Date
<input class="inputpekee" type="date" name="expiry_date" placeholder="Expiry Date">
</label>
<button type="submit">get Values</button>
</form>

You can also try it without having to use moment, using setMonth
$('#validity').change(function(){
let dt = new Date($('#issue_date').val());
dt.setMonth( dt.getMonth() + parseInt($(this).val()));
let output = dt.getDate()+'/'+(dt.getMonth()+1)+'/'+dt.getFullYear()
$('#expiry_date').val(output);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="tarehe" data-validate = "Date of Issue is required">Date of Issue
<input class="inputpekee" type="date" id="issue_date" name="issue_date" placeholder="Date of Issue">
</div>
<div class="tarehe" data-validate = "Validity Period is required">
<input class="inputpekee" type="number" id="validity" name="validity" placeholder="Validity Period(Months)" min="1" max="60">
</div>
<div class="tarehe" data-validate = "Expiry Date is required">Expiry Date
<input class="inputpekee" disabled name="expiry_date" placeholder="Expiry Date" id="expiry_date">
</div>

How to set values for datepicker in jquery

I have a list of datepickers i need to set the value based on selection of first date picker, if we select the value in first date picker same value should be passed to all other date pickers
<input name="start" id='from' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='to' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='return' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
<input name="start" id='depart' class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />
Here is my jquery
$('input.date-pick, .input-daterange input[name="start"]').datepicker().on('changeDate', function (ev) {
var date2 = $('.date-pick').datepicker('getDate', '+1d');
//alert (date2);
date2.setDate(date2.getDate()+1);
$('input.date-pick).datepicker('setDate', date2);
});
But its not working.Please help to resolve this
Thanks in advance

$(function () {
$("#datepicker1, #datepicker2, #datepicker3, #datepicker4").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 1);
$("#datepicker2").datepicker("setDate", date1);
var date3 = new Date(date1.getTime());
date3.setDate(date3.getDate() + 2);
$("#datepicker3").datepicker("setDate", date1);
var date4 = new Date(date1.getTime());
date4.setDate(date4.getDate() + 3);
$("#datepicker4").datepicker("setDate", date1);
});
});
Link Here.

var document.getElementById("title").value; issue

Hi I have a form but when it submits, all the fields are blank. What am I doing wrong here?
<form><p>
Remind me about: <input type="text" id="title"><br>
Where: <input type="text" id="where">
Notes: <input type="text" id="notes"><br>
Start Date and Time: <input type="datetime" id="startDate" placeholder="October 13, 1975 11:10:00">
End Date and Time: <input type="datetime" id="endDate" placeholder="October 13, 1975 11:15:00"><br>
<input type="submit" onclick="calendarDemoAdd(this.form)"></p>
</form>
and the Javascript:
var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value);
var title = document.getElementById("title").value;
var where = document.getElementById("where").value;
var notes = document.getElementById("notes").value;
var calSuccess = function(message) { alert("Success: " + JSON.stringify(message)); };
var calError = function(message) { alert("Error: " + message); };
function calendarDemoAdd() {window.plugins.calendar.createEvent(title,
where,notes,startDate,endDate,calSuccess,calError);
}

You have failed to give the input elements name attributes.
Only controls with names can be successful.
It is possible (although it would fail to follow the principles of Progressive Enhancement and Unobtrusive JavaScript) to replace the data collection and encoding functionality of the <form> with JavaScript, but there is no sign that the JS you have is doing that.

Looks like name attribute is missing for all the input fields
<form><p>
Remind me about: <input type="text" name="title" id="title"><br>
Where: <input type="text" name="where" id="where">
Notes: <input type="text" name="notes" id="notes"><br>
Start Date and Time: <input type="datetime" name="startDate" id="startDate" placeholder="October 13, 1975 11:10:00">
End Date and Time: <input type="datetime" name="endDate" id="endDate" placeholder="October 13, 1975 11:15:00"><br>
<input type="submit" onclick="calendarDemoAdd(this.form)"></p>
</form>

The actual fix was
function calendarDemoAdd() {
var title = document.getElementById("title").value;
var where = document.getElementById("where").value;
var notes = document.getElementById("notes").value;
window.plugins.calendar.createEvent(title,where,notes,startDate,endDate,calSuccess,calError);
}
The reason is that the variables were populated before the function was run.