how can i validate 3 separate input field for date, month & year using jquery or javascript?

Question

I have 3 separate input fields for date, month and year.

Date field accepts only values in range 1-31 and month field accepts only values in range 1-12. The date format I want is dd mm yyyy.

Below is my html code please help me any one.

<div class="date"> 
  <input id="date" name="day" /> 
  <input id="month" name="month" /> 
  <input id="year" name="year /> 
</div> 

all input fields are text boxes.

Solution 1

Just a little practice for myself and hope this helps

$('#submit').click(function(){
  var date = parseInt($('#date').val());
  var month = parseInt($('#month').val());
  var year = parseInt($('#year').val());
  if (isNaN(date) || isNaN(month) || isNaN(year)) {
    alert('wrong format');
    return false;
  } else {
    if (date > 31 || date < 1) {
      alert('wrong date');
      return false;
    } else if ((month==4 || month==6 || month==9 || month==11) && date ==31) {
      alert('wrong date');
      return false;
    } else if (month==2) {
     var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
      if (date> 29 || (date ==29 && !isleap))
      	alert('wrong date');
        return false;
    }
    if (month > 12 || month < 1) {
      alert('wrong month');
      return false;
    } 
    if (year > 2050 || year < 1900) {
      alert('wrong year');
      return false;
    } 
  }
  $('#myform').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" id="myform" method="POST">
<label for="date">Date</label>
<input type="text" id="date" name="date" />
<label for="month">Month</label>
<input type="text" id="month" name="month" />
<label for="year">Year</label>
<input type="text" id="year" name="year" />
<input id="submit" type="submit" value="Submit">
</form>

Reference: http://www.jquerybyexample.net/2011/12/validate-date-using-jquery.html

Solution 2

Check it!! I created 3 text field which is for day month year and validate through javascript.

        <script type="text/javascript">
            function dateChecker()
            {
            var dayValidate = "([1-9]|[12]\d|3[01])";
            var monthValidate = "^(0?[1-9]|1[012])$";
            var yearValidate = "/^(19[5-9]d|20[0-4]d|2050)$/";
            var days = document.getElementById('dayId').value;
            var months = document.getElementById('monthId').value;
            var years = document.getElementById('yearID').value;

            if (!days.match(dayValidate))
            {
                alert("Please, Enter Days  between 1 to 31 ");
                document.form1.dayId.focus();
                return false;
            }

            if (!months.match(monthValidate))
            {
                alert("Please, Enter Months in between 1 to 12 ");
                document.form1.monthId.focus();
                return false;
            }

            if (!(+years >= 1900 && +years <= 2016))
            {
                alert("Please, Enter Years in between 1900 to 2016 ");
                document.form1.yearID.focus();
                return false;
            }

        }


       </script>

       <form name="form1">
        <table>
            <tr>
                <td>
                    <input type="text"  id="dayId"/> 
                </td>
                <td>
                    <input type="text"  id="monthId"/> 
                </td>
                <td>
                    <input type="text"  id="yearID"/> 
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" onclick="returndateChecker();"/>
                </td>
            </tr>
        </table>
    </form>

Solution 3

try following script :

  <script>
    function validateForm() {
        var d = document.forms["myForm"]["date"].value;
        var m = document.forms["myForm"]["month"].value;
        var y = document.forms["myForm"]["year"].value;

        if(d == null || d == ""){
            alert("Please select date.");
            return false;
        }
        if(m == null || m == ""){
            alert("Please select date.");
            return false;
        }
        if(y == null || y == ""){
            alert("Please select date.");
            return false;
        }
        if((m == 4 || m == 6 || m == 9 || m == 11) && d == 31) {
            alert("Selected month contains only 30 days.");
            return false;
        }
        if(m == 2 && d > 29 && (y%4 == 0)) {
            alert("Selected month contains only 29 days.");
            return false;
        }

        if((m == 2) && d > 28) {
            alert("Selected month contains only 28 days.");
            return false;
        }
        return true;
    }
</script>

and form is :

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> 
<input type="number" id="d" name="date" min="1" max="31" />
<input type="number" id="m" name="month" min="1" max="12" />
<input type="number" id="y"  name="year" min="1900" max="9999" />
<input type="submit" value="Submit">

</form>

Comments

[ramesh bogandla]

it client requirement that 3 separate input field for date, month & year

[Deepak Jain]

did you try : <input type="number" name="date" min="1" max="31" /> <input type="number" name="month" min="1" max="12" /> <input type="number" name="year" min="1900" max="9999" />

[ramesh bogandla]

some months having 30day and some months having 31day and feb month 29day leap year other wise feb contain 28day, how can validate that one

[ramesh bogandla]

is there any other way to do the valiation

[Durgesh.M]

@michel Thanks for editing

[Eleazar Resendez]

the input-day accepts any number greater than 1, regardless of the 31 limit