MVC Required Textbox with JQuery DatePicker

Question

I have an MVC form that has 3 required fields. A Name textbox, a Dropdown list and a textbox with the JQuery DatePicker attached to it. If the form is submitted and there is nothing selected, the form gets rejected and text appears next to the fields stating it is required. After I select a date from the JQuery DatePicker textbox the required text is still there, this is not the case with the other two required inputs. Any idea how to fix this?

Here are some images:

Required Date

After I select a date

enter image description here

Model

[Required(ErrorMessage="Required")]
public string Requestor { get; set; }

[Required(ErrorMessage="Required")]
[DataType(DataType.Date)]
[Display(Name="Date Requested")]
public DateTime?  Date_Requested { get; set; }

[Required(ErrorMessage = "Required")]
public string Process { get; set; }

View

<div class="editor-label">
    @Html.LabelFor(model => model.Requestor)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Requestor) 
    @Html.ValidationMessageFor(model => model.Requestor)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Date_Requested)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Date_Requested,new {@class="datepicker" })
    @Html.ValidationMessageFor(model => model.Date_Requested)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Approved_Date)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Approved_Date,new {@class="datepicker" }) 
    @Html.ValidationMessageFor(model => model.Approved_Date)
</div>

JQuery This is where I found the code JQuery DatePicker

$(".datepicker").datepicker();

Floremin · Accepted Answer · 2014-04-17 16:08:03Z

2

Use datepicker's onSelect event and in there call valid() on your date field.

According to datepicker documentation http://api.jqueryui.com/datepicker/#option-onSelect this in onSelect refers to the associated text field, so you can simply do this:

$(".datepicker").datepicker({
    onSelect : function() {
        $(this).valid();
    }
});

edited Apr 17, 2014 at 16:08

answered Apr 17, 2014 at 15:42

Floremin

4,08918 silver badges21 bronze badges

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

2 Comments

joetinger Over a year ago

Sorry but I'm not 100% sure where to add this. I added by current JQuery which isn't much but it seems to add the calendar

Floremin Over a year ago

I modified my answer to include the code. It's untested, but should be along those lines.

IdahoB · Accepted Answer · 2017-01-24 21:23:10Z

This post has been here for a couple of years, but there is more to the answer that I thought I'd add ...since I ran into the same issue. Whenever my form was submitted without picking a date using the jQuery datepicker, I would get a client side validation error saying 'DateProcessed field is required.' ... But I couldn't see anything that would make the field required!

model:

// No attributes applied ([Required] or otherwise in my case)    
public DateTime DateProcessed { get; set; }

model initialization:

DateProcessed = DateTime.MinValue;

Form.cshtml:

@Html.TextBoxFor(m => m.DateProcessed, new { id = "DateProcessedDatePicker", placeholder = " MM/dd/yyyy" })

Script in .ready() (in Form.cshtml):

$('#DateProcessedDatePicker').datepicker({ dateFormat: 'mm/dd/yy' })

So what was happening? It appears that if your date field is initialized to DateTime.MinValue, that it becomes a null value in the datepicker (and the handy placeholder text shows up). But the model's date field above is a non-nullable DateTime field which cannot be set to null (by ignoring the datepicker and not selecting a date). The solution, assuming the date is NOT required, is to first change the field to a nullable DateTime (below), then second, make sure the code that depends on or utilizes this field works properly even if it is null:

// No attributes applied ([Required] or otherwise in my case)    
public DateTime? DateProcessed { get; set; }

Enjoy! Brian

Collectives™ on Stack Overflow

MVC Required Textbox with JQuery DatePicker

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related