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
    • 128
    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: