FORM : checking in javascript

Question

I have 2 fields, the first field is named name and the second dateofbirth. I would like to improve the validation mostly on my field dateofbirth. I would like to use a simple code for beginner.

the rule, the user can enter a date bigger than -> 01-01-1900, if the date is smaller, an error message must appear.

function validation()
{
    var name = document.getElementById('name').value;
    var dateofbirth = document.getElementById('dateofbirth').value;

    if(name == ""){
        document.getElementById('nameError').innerHTML = " ** the name field is empty ! ";
         return false;
    }

    if(name.length < 2){
        document.getElementById('nameError').innerHTML = " ** min 2 characters ! ";
        return false;
    }

    if(dateofbirth == ""){
        document.getElementById('dateofbirthError').innerHTML = " ** the date field is empty ! ";
        return false;
    }
}

<form action="#" onsubmit="return validation()" >
<br>
<label>Name : </label>
<br>
<input type="text" name="name" id="name">
<br>
<span id="nameError"></span>
<br>
<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>

VIKRAM · Accepted Answer · 2020-05-23T15:11:25.913

1

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

function validation()
{
    var name = document.getElementById('name').value;
    var dateofbirth = document.getElementById('dateofbirth').value;

    if(name == ""){
        document.getElementById('nameError').innerHTML = " ** the name field is empty ! ";
         return false;
    }

    if(name.length < 2){
        document.getElementById('nameError').innerHTML = " ** min 2 characters ! ";
        return false;
    }

    if(!isValidDate(dateofbirth)){
        document.getElementById('dateofbirthError').innerHTML = " ** the date field is empty ! ";
        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;

     }
    }

edited May 23 '20 at 15:11

answered May 23 '20 at 14:44

VIKRAM

52
7

Thank you for help, but I am beginner, I don't understand how to adapt this? I am lost... – May 23 '20 at 14:49
there is small change in I made Please update the code – VIKRAM May 23 '20 at 14:52
Thats fine no problem!! just copy paste as it is and it will work – VIKRAM May 23 '20 at 14:55
If I type the date 01-01-1000 it passes normally it should block – May 23 '20 at 15:02
1

replace this code if(year < 1900 && year > 2100){ to if(year < 1900 || year > 2100){ – VIKRAM May 23 '20 at 15:06
Yeess ! Thank you very much, the problem is the condition. Sorry, thank you a lot for your help. – May 23 '20 at 15:11

FZs · Answer 2 · 2020-05-23T14:59:25.327

Since dateofbirth.value is in a fixed-length format, you can just remove the hyphens (-), convert to number, and compare to 19000101:

function validation()
{
    var name = document.getElementById('name').value;
    var dateofbirth = document.getElementById('dateofbirth').value;

    if(name == ""){
        document.getElementById('nameError').innerHTML = " ** the name field is empty ! ";
         return false;
    }

    if(name.length < 2){
        document.getElementById('nameError').innerHTML = " ** min 2 characters ! ";
        return false;
    }

    if(dateofbirth == ""){
        document.getElementById('dateofbirthError').innerHTML = " ** the date field is empty ! ";
        return false;
    }
    if(+dateofbirth.replace(/-/g, '') < 19000101){
        document.getElementById('dateofbirthError').innerHTML = " ** the date is invalid ! ";
        return false;
    }
}

<form action="#" onsubmit="return validation()" >
<br>
<label>Name : </label>
<br>
<input type="text" name="name" id="name">
<br>
<span id="nameError"></span>
<br>
<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>

@alain Because that's the number representation of `01-01-1900` in `YYYYMMDD` format in which `dateofbirth.value` is — FZs, May 23 '20 at 15:05

score 0 · Answer 3 · answered May 23 '20 at 15:05

Just use attribute pattern and min for date to validate via browser.

<form action="#">
  <label>Name : </label>
  <br>
  <input type="text" name="name" id="name" pattern=".{2,}" title="Min length is 2">
  <br>
  <label>Date of birth : </label>
  <br>
  <input type="date" name="dateofbirth" id="dateofbirth" min="1900-01-01">
  <br>
  <input type="submit" value="ok">
</form>

Note that date type for input not working in desktop Safari and IE. You can make extra validator with regexp like this one. Or set date pattern and check in js for new Date(input) > new Date(1900, 00)

FORM : checking in javascript

3 Answers3