javascript - jquery datepicker - how to make readonly and required? - Stack Overflow

admin管理员组

文章数量:1405385

I am creating a form, the customer has requested an 'eventStart' and 'eventStop' range, they also want it to be required, and don't want anyone to be able to manually change the values.

I am using jquery datePicker and jquery validate.

I have it working one way or the other, but not both.

<input class="inputs" type="text" id="eventStart"  readonly/>
<input class="inputs" type="text" id="eventStop"  readonly/>

This works perfectly, the range works, and it cannot be manually edited.

<input class="inputs" type="text" id="eventStart"  required/>
<input class="inputs" type="text" id="eventStop"  required/>

This pops up the "! Please fill out this field", but allows the date to be manually edited.

If I put both, it allows the user to skip the field (no validation.)

I am creating a form, the customer has requested an 'eventStart' and 'eventStop' range, they also want it to be required, and don't want anyone to be able to manually change the values.

I am using jquery datePicker and jquery validate.

I have it working one way or the other, but not both.

<input class="inputs" type="text" id="eventStart"  readonly/>
<input class="inputs" type="text" id="eventStop"  readonly/>

This works perfectly, the range works, and it cannot be manually edited.

<input class="inputs" type="text" id="eventStart"  required/>
<input class="inputs" type="text" id="eventStop"  required/>

This pops up the "! Please fill out this field", but allows the date to be manually edited.

If I put both, it allows the user to skip the field (no validation.)

• javascript
• jquery
• datepicker
• jquery-validate

Share Follow asked May 28, 2014 at 17:24 user3653365user3653365 6511 silver badge66 bronze badges 8

• 2 I guess I don't understand the need for required and read only on the same object, why have it all? – Dean.DePue Commented May 28, 2014 at 17:27
• Data input validation ensures that the user enters the correct data. If it's readonly, then there is no need for input validation at all. – Sparky Commented May 28, 2014 at 17:33
• Agreed. Assuming some JS code is pre-filling the datepicker, why do you want to add validation to it if the user can't change it anyway? – Gautham C. Commented May 28, 2014 at 17:34
• If the pop-up really says "please fill out this field", then you are NOT using the jQuery Validate plugin... it's broken or not installed properly. "please fill out this field" is HTML 5 validation ing from the browser. Plus, by default, the jQuery Validation plugin does not create pop-ups... again, that's HTML 5 validation from the browser. When the jQuery Validate plugin is working properly, it dynamically disables HTML 5 validation so it can take over. – Sparky Commented May 28, 2014 at 17:37
• Show enough code to make a working demo of your form including your jQuery Validate setup and HTML markup. Also, please address the first three ments regarding why you would need validation on a field that's already populated by code and cannot be changed by the user. After all, what if this readonly field fails validation... what is the user supposed to do about this if he cannot edit? – Sparky Commented May 28, 2014 at 17:43

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

In this case if you add readonly and required and it bypasses validation your options are to implement your own validation or to hook form submit or the onclick action of your submit button.

Another option is to use required only. Then hook the keydown action and stop text entry.

$("#inputs").keydown(function (event) {
    event.preventDefault();
});

This will only stop text entry and is not secure. Sneaky people can still change the value if they want. Don't forget to validate field entry on the backend.

i have this workaround $nextmonth = date('Y-m-d 23:59:59',strtotime("+1 month")); and for input <input type="text" class="text-input" name="project_deadline" id="project_deadline" value="<?php echo $nextmonth ?>" readonly />

本文标签： javascriptjquery datepickerhow to make readonly and requiredStack Overflow