CODEWITHSUNDEEP
javascript
user13548628
user13548628

Reputation:

FORM : checking in javascript

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>

Upvotes: 2

Views: 66

Answers (3)

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 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;

     }
    }

Upvotes: 1

TAB_mk
TAB_mk

Reputation: 51

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)

Upvotes: 0

FZs
FZs

Reputation: 18639

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>

Upvotes: 0

Related Questions