Jquery Datepicker - Make Required, but set text input Read Only

I’ve spend a huge amount of time trying to get this to work.
I need the date text input set to read only so the user HAS to use the picker. That works fine.
But, you can’t have read only set on the input, AND have it required at the same time. But, I need this so the user can’t skip the field and enter nothing.

Reason for this: the form is being used by any number of different nationalities, and the only way to insure the correct input format is to use the picker and not allow manual input.

So here’s what I’ve got:


      <input type="text" id="prim_dob" name="prim_dob" class="form-control" style="background:white;" data-error="Pick Your Birthdate" readonly="readonly"  />
      <div class="help-block with-errors"></div>


$( "#prim_dob" ).datepicker({
        yearRange: '-71:+0',
        changeMonth: true,
        changeYear: true,
	    showMonthAfterYear: true,
        dateFormat: 'dd-mm-yy',
 $("#prim_dob").datepicker("setDate", new Date(<?php echo $dob; ?>)); // date from database if previously entered

I’ve tried a ton of different things … marking the field as required, and setting “readonly” in the script, and the other way around. Nothing seems to work for me. I could add server-side validation after the form submit, but I’d like the error message to show like all the other inputs on the form if nothing is entered.

If I do THIS, the form submit button is disabled as expected with no input, but the error message won’t show:

<input type="text" id="prim_dob" name="prim_dob" class="form-control" style="background:white;" placeholder="Birthdate is REQUIRED" data-error="Pick Your Birthdate" required />

$('#prim_dob').attr('readonly', true);


How about marking it as required (not readonly) but preventing input.

$('#prim_dob').keydown(function (event) {

Test thoroughly of course :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.