Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make validation for date and time using Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 97
    Comment on it

    Hello Reader's! if you want to make the Date time format validation in your form then you can use Javascript to validate.

    Let's see the example below:-

    your html will be go like this:-

    <form method="POST" action="/javascript/validate-date/" onsubmit="checkForm2(this); return false;">
    <fieldset>
    <legend>Event Details</legend>
    <label for="field_startdate2">Start Date</label><span><input id="field_startdate2" type="text" size="12" placeholder="dd/mm/yyyy" name="startdate"> <small>(dd/mm/yyyy)</small></span>
    <label for="field_starttime2">Start Time</label><span><input id="field_starttime2" type="text" size="12" name="starttime"> <small>(eg. 01:36 or 1:36am)</small></span>
    <span><input type="submit"></span>
    </fieldset>
    </form>   
    

    And your javascript will go like this:-

    <script type="text/javascript">
    
          function checkForm(form)
          {
            // regular expression to match required date format
            re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
    
            if(form.startdate.value != '') {
              if(regs = form.startdate.value.match(re)) {
                // day value between 1 and 31
                if(regs[1] < 1 || regs[1] > 31) {
                  alert("Invalid value for day: " + regs[1]);
                  form.startdate.focus();
                  return false;
                }
                // month value between 1 and 12
                if(regs[2] < 1 || regs[2] > 12) {
                  alert("Invalid value for month: " + regs[2]);
                  form.startdate.focus();
                  return false;
                }
                // year value between 1902 and 2015
                if(regs[3] < 1902 || regs[3] > (new Date()).getFullYear()) {
                  alert("Invalid value for year: " + regs[3] + " - must be between 1902 and " + (new Date()).getFullYear());
                  form.startdate.focus();
                  return false;
                }
              } else {
                alert("Invalid date format: " + form.startdate.value);
                form.startdate.focus();
                return false;
              }
            }
    
            // regular expression to match required time format
            re = /^(\d{1,2}):(\d{2})([ap]m)?$/;
    
            if(form.starttime.value != '') {
              if(regs = form.starttime.value.match(re)) {
                if(regs[3]) {
                  // 12-hour value between 1 and 12
                  if(regs[1] < 1 || regs[1] > 12) {
                    alert("Invalid value for hours: " + regs[1]);
                    form.starttime.focus();
                    return false;
                  }
                } else {
                  // 24-hour value between 0 and 23
                  if(regs[1] > 23) {
                    alert("Invalid value for hours: " + regs[1]);
                    form.starttime.focus();
                    return false;
                  }
                }
                // minute value between 0 and 59
                if(regs[2] > 59) {
                  alert("Invalid value for minutes: " + regs[2]);
                  form.starttime.focus();
                  return false;
                }
              } else {
                alert("Invalid time format: " + form.starttime.value);
                form.starttime.focus();
                return false;
              }
            }
    
            alert("All input fields have been validated!");
            return true;
          }
    
        </script>
    

    Now if the user will make incorrect input an alert box will notify it to user.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: