Javascript Date Validation on Form Input

Question

Am trying to validate the date on a form so that user cannot select a date in the past, or that checkout date is greater than checkin date

<form action="form2email.php" method="post" name="form" target="_blank" onSubmit="return validate(form);">
    <fieldset id="user-1">
        <h2>
      <img src="images/booking-enquiry.png" width="160" height="20" />
    </h2>
        <label for="name">Name:</label>
        <input name="name" type="text" />
        <label for="email" class="required">Email:</label>
        <input type="text" name="email" size="8" id="email" />
    </fieldset>

    <fieldset id="user-2">
        <h2>&nbsp;</h2>
        <label for="Phone" class="required">Phone:</label>
        <input type="text" name="Telephone_Number" id="Phone" />
        <label for="Accommodation Type" class="required">Accommodation Type:</label>
        <select id="room_type" name="Accommodation Type">
            <option value="Villa">Villa</option>
            <option value="1 Bed Apartment">1 Bed Apartment</option>
            <option value="2 Bed Apartment">2 Bed Apartment</option>

        </select>
    </fieldset>

    <fieldset id="user-3">
        <h2>&nbsp;</h2>
        <label for="Check-in-Date" class="required">Check-in Date:</label>
        <script>
            DateInput('checkindate', true, 'DD-MON-YYYY')
        </script>

        <label for="Check-out-Date" class="required">Check-out Date:</label>
        <script>
            DateInput('checkoutdate', true, 'DD-MON-YYYY')
        </script>

        <label>
            <div style="padding-top:10px;font-size:14px;color:white;">
                <p>Total Charges: <span id="tot_charges">1995.00</span> THB
                </p>
                <p class="VAT"><span> Prices exclude VAT @ 7%</span>
                </p>
            </div>
        </label>

    </fieldset>
    <fieldset id="user-4">
        <h2>&nbsp;</h2>
        <label for="Comments" class="required">Comments :</label>
        <textarea name="Comments"></textarea>

        <div>
            <label style="padding:0;"><a href="cancellation.html" onclick="window.open('cancellation.html','popup','width=800,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Please read our cancellation policy </a>
            </label>
            <input type="checkbox" name="checkbox" id="checkbox" value="I agree to cancellation policy">
            <label for="checkbox" id="agree" name="agree">I agree to cancellation policy</label>
        </div>
        <input type="submit" value="Submit" />
    </fieldset>
</form>


<SCRIPT LANGUAGE="JavaScript">
    function validate() {
        var frm = document.forms["form"];
        if (frm.checkbox.checked == false) {
            alert("Please Agree To Our Cancellation Policy.");
            return false;
        } else return true;

    }
</SCRIPT>


<script type="text/javascript">
    var frmvalidator = new Validator("form");
    frmvalidator.addValidation("Email", "maxlen=100");
    frmvalidator.addValidation("Email", "req");
    frmvalidator.addValidation("Email", "email");
    frmvalidator.addValidation("Phone", "req");
    frmvalidator.addValidation("Phone", "maxlen=100");
    frmvalidator.addValidation("Phone", "numeric");
    frmvalidator.setAddnlValidationFunction(validate);
</script>

Was trying to integrate something like this in :

function validateTheDate() {
  var dateOK = false;
  var Today = new Date();

  if (Response_Requested_By_Object.picked.date < Today) 
    alert('Cannot select a date in the past.');
  else if (Response_Requested_By_Object.picked.yearValue > 2020) 
    alert('Cannot select dates beyond 2020.');
  else 
    dateOK = true;

  return dateOK;
}

But not quite sure how to do it with existing validation there ?!?

Tomas Ramirez Sarduy · Accepted Answer · 2013-11-09 05:45:42Z

1

This is how the validateDate function should look like:

function validateDate(){
  var dateOK  = false;
  var today   = new Date();
  var startDt = new Date(document.getElementById("checkin").value).getTime();
  var endDt   = new Date(document.getElementById("checkout").value).getTime();

  if (startDt < today || endDt < today)
    alert('Cannot select a date in the past.');
  else if (startDt > 2020 || endDt > 2020) 
    alert('Cannot select dates beyond 2020.');
  else if(startDt > endDt){
    alert ('Checkout date is greater than Checkin date.');
    dateOK = true;
  }
}

to add this custom function to you validator, just need to:

frmvalidator.setAddnlValidationFunction(validateDate);

Note: I'm sure there is a lot of (Javascript) Jquery plugins very good for validate forms and dates (using alert is not cool).

edited Nov 9, 2013 at 5:45

answered Nov 9, 2013 at 5:32

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2971159 Over a year ago

thanks looks a lot better but still getting a code error on this line apparently - frmvalidator.setAddnlValidationFunction(validateDate); ?!

user2971159 Over a year ago

was there a closing bracket missing on function validateDate() ? as it seems to have sorted the error out - but forms are still able to be submitted

Tomas Ramirez Sarduy Over a year ago

@user2971159: Yes, there was a missed closing bracket, and of course is submitted, you have to validate the form before submit, you need to add onsubmit="return validateForm();" to the form element, but hey, there is a lot of answers out there, research a little bit ;)

user2971159 Over a year ago

onSubmit="return validate(form);" - this is what is there now - will not work ?

Collectives™ on Stack Overflow

Javascript Date Validation on Form Input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related