CODEWITHSUNDEEP
javascript
user13548628
user13548628

Reputation:

Checking date of birth

I know the subject exists on StackOverFlow as below, but I don't understand.

How to validate date with format "mm/dd/yyyy" in JavaScript?

My goal is that when the date of birth is false, an error message appears.

I want to understand how to valide the year for example ?

If the user enters 1000-01-01 or 3000-01-01, I would like to get an error message.

Thank you for your help

function validation(){

	var dateofbirth = document.getElementById('dateofbirth').value; 
	

	if(dateofbirth == ""){
		document.getElementById('dateofbirthError').innerHTML = "Empty";
		return false;
	}



}
<form action="#" onsubmit="return isValidDate()" >
<label>Date of birth : </label>
<br>
<input type="date" name="dateofbirth" id="dateofbirth">
<br>
<span id="dateofbirthError"></span>
<br>
<input type="submit" value="ok">
</form>

Upvotes: 1

Views: 348

Answers (2)

VIKRAM
VIKRAM

Reputation: 62

we can use customized function or date pattern. Below code is customized function as per your requirement please change it.

     function validation(){

    var dateofbirth = document.getElementById('dateofbirth').value; 

            if(!isValidDate(dateofbirth)){
                document.getElementById('dateofbirthError').innerHTML = "Empty";
                console.log("Invalid date")
                return false;
            }
  function isValidDate(str) {
    var getvalue = str.split('-');
    var day = getvalue[2];
    var month = getvalue[1];
    var year = getvalue[0];
    if(year < 1900 || year > 2100){
    return false;
    }
    if (month < 1 || month > 12) { 
      return false;
     }
     if (day < 1 &|| day > 31) {
      return false;
     }
     if ((month==4 || month==6 || month==9 || month==11) && day==31) {
      return false;
     }
     if (month == 2) { // check for february 29th
      var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
      if (day>29 || (day==29 && !isleap)) {
       return false;
     }
     }
     else{
     return true;

     }
    }

Upvotes: 1

Zachary Haber
Zachary Haber

Reputation: 11027

Here's how you can do this by leveraging html5 constraints. This has a dual effect of already displaying error messages when the user tries to submit, as well as preventing submission while the form is invalid.

In this case, I also set it up so that it displays an error message whenever the form gets set to an invalid state (rather than waiting for submission).

function onSubmit(event) {
  event.preventDefault();
  console.log(event.target.dateofbirth.value);
}

function onInvalid(event) {
  document.getElementById('dateofbirthError').innerHTML = event.target.validationMessage;
}
// You can make this only trigger on blur to make it not try and give warnings while they are editing.
// Or you can remove the checkValidity calls from here
// to make it so the warnings only show up when the user presses enter
function validation(event) {
  const {
    currentTarget: target
  } = event;
  const dateofbirth = target.value;


  if (dateofbirth == "") {
    // This will change the error message from 'Please fill out this field' to 'Empty'
    //target.setCustomValidity('Empty')
    target.checkValidity()
    return false;
  }
  const [year, month, day] = dateofbirth.split('-').map(val => +val);
  const currentYear = new Date().getFullYear();
  if (year > currentYear || year <= currentYear - 150) {
    target.setCustomValidity('Not a real birthday!')
    target.checkValidity()
    return;
  }

  target.setCustomValidity('')
  if (target.checkValidity()) {
    // Clear the displayed errors as invalid is not called if there are no errors.
    document.getElementById('dateofbirthError').innerHTML = ''
  }

}
.error {
  color: red;
}
<form action="#" onsubmit="onSubmit(event)">
  <label>Date of birth : </label>
  <br>
  <input type="date" name="dateofbirth" id="dateofbirth" onInput="validation(event)" onBlur="validation(event)" onInvalid="onInvalid(event)" required>
  <br>
  <span id="dateofbirthError" class="error"></span>
  <br>
  <input type="submit" value="ok">
</form>

Upvotes: 1

Related Questions