MVC4 validation with Bootstrap datePicker

Question

I have a datepicker textbox that I need to make a required field. Model:

    [Required(AllowEmptyStrings = false, ErrorMessage = "Required")]
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    [Display(Name = "Date of Something")]
    [DatePicker] //custom tag builder I wrote to make this a datepicker
    public string DateOfSomething { get; set; }

View:

    @Html.ControlGroupFor(x => x.DateOfSomething) //has the custom tag I built to handle datepicker
    @Html.ValidationMessageFor(x => x.DateOfSomething)

jquery:

    $("#btnSubmit").click(function() {
        if ($('#DateOfSomething') == "" || $('#DateOfSomething') == null) {
            $("#ValidationSummary").append("<div>Required</div>");
            $("#ValidationSummary").show();
        }
    });

in _layout

  <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js")"></script>

ControlGroupFor extension:

     public static MvcHtmlString ControlGroupFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression)
    {
        var propertyName = ExpressionHelper.GetExpressionText(expression);
        var controlGroupWrapper = BuildTagWith("div", "control-group");
        controlGroupWrapper.InnerHtml += htmlHelper.LabelFor(expression, new Dictionary<string, object> { { "class", "control-label" } }).ToHtmlString();
        var controlDiv2 = BuildTagWith("div", "controls");

        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var inputTag = "";

        var valAttributes = htmlHelper.GetUnobtrusiveValidationAttributes(propertyName, metadata);

        if (metadata.AdditionalValues.ContainsKey("DatePicker"))
        {
            CreateDatePicker(htmlHelper, expression, propertyName, controlDiv2, controlGroupWrapper);
            controlGroupWrapper.InnerHtml += htmlHelper.ValidationMessageFor(expression, null, valAttributes);
            return MvcHtmlString.Create(controlGroupWrapper.ToString(TagRenderMode.Normal));
        }
        if (metadata.AdditionalValues.ContainsKey("DropDownListPropertyName"))
        {
            var propertyNameForOptions = metadata.AdditionalValues["DropDownListPropertyName"] as string;
            var options = GetPropValue(htmlHelper.ViewData.Model, propertyNameForOptions) as Dictionary<string, string>;
            var selectedItem = GetPropValue(htmlHelper.ViewData.Model, propertyName) as string;
            inputTag += BuildSelectList(options, propertyName, selectedItem);
        }
        else
        {
            var value = GetPropValue(htmlHelper.ViewData.Model, propertyName);
            inputTag += htmlHelper.EditorFor(expression).ToHtmlString();
        }
        controlDiv2.InnerHtml += inputTag + htmlHelper.ValidationMessageFor(expression, null, valAttributes);

        controlGroupWrapper.InnerHtml += controlDiv2.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(controlGroupWrapper.ToString(TagRenderMode.Normal));
    }

I post to the form despite my code attempting to stop it. Any Ideas?

Answer 1

Try removing your click handler. That javascript should be unnecessary since it should be handled by the jQuery validation and Required attribute. The jQuery validation also handles cancelling the submit if one or more of the fields is invalid.

Answer 2

You can use just EditerFor and JQUery Datapicker.

More on http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx