CODEWITHSUNDEEP
asp.net-mvckendo-ui
Yanayaya
Yanayaya

Reputation: 2184

Why is my date picker stopping my form submission in my MVC Application?

I'm having a strange problem that I can't actually pin point mainly because I don't have any error messages or validation warnings. In my MVC web application I have an Ajax form that works with some KendoUI widgets. I have all my scripts in the correct order including unobtrusive validation etc.

The KendoUI widget code looks like this:

@(Html.Kendo().DateTimePicker().Name("deliverydate"))

The problem I have is that when I try to submit the form it won't let me, the page hops back up to the date picker and focuses on it. Now this field is not required in the model nor does it have any validation against it that I can see but the form behaves as if it does. Additionally if you choose a date that's within the current month it will not allow the form to submit, if you put any date in the next month it works fine.

As a process of elimination I changed the field from a KendoUI widget to a standard editor for:

@Html.EditorFor(model => model.deliverydate)

MVC recognises that this is a datetime field and when the application is run, it changes it to a datepicker but I still get the same behavior.

Is this a validation bug perhaps or have I not done something?

Here is my code

View

@using (Ajax.BeginForm("Create", "Offer", new AjaxOptions
{
    OnSuccess = "Success",
    OnFailure = "Failure"
}, new { @class = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.requirement_idx);
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="ul-label">
        @Html.LabelFor(model => model.deliverydate)
    </div>
    <div class="ul-data">
        @(Html.Kendo().DateTimePicker()
            .Name("deliverydate")
        )
    </div>
}

Controller

//
// POST : Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(OfferViewModel vm)
{
    if (ModelState.IsValid)
    {
        var theoffer = Mapper.Map<offers>(vm);
        db.offers.Add(theoffer);
        db.SaveChanges();
        return RedirectToAction("Details");                
    }
    return View(vm);
}

ViewModel

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Text;
using System.Threading.Tasks;
using Spoton_Areas_Test.Models;

namespace Spoton_Areas_Test.ViewModels
{
    public class OfferViewModel
    {
        [Display(Name = "Delivery Date")]
        public Nullable<System.DateTime> deliverydate { get; set; }
    }
}

This problem seems to span all browsers I tested on, IE, Chrome and FireFox. Very odd behaviour and I'd like to get to the bottom of it.

Upvotes: 1

Views: 1337

Answers (2)

Ian
Ian

Reputation: 879

So it seems there's a simpler way to get around this issue by forcing the input control to be of a certain data type and then applying the KO picker over the top. Originally I had used the standard MVC TextBoxFor but by forcing the input to be of a specific data type the correct validation is applied. Please see below.

HTML (note the commented out TextBoxFor) 

<div class="form-col">
    @*@Html.TextBoxFor(m => m.CreateDate)*@
    <input type="text" data-type="datetime" id="CreateDate"/>
</div>
Applying the Kendo DateTimePicker script:

$(document).ready(function() {
    $("#CreateDate")
        .kendoDateTimePicker({
            value: new Date(),
            min: new Date(1950, 0, 1),
            max: new Date()
        });
});

Upvotes: 0

Yanayaya
Yanayaya

Reputation: 2184

Ok so this problem was being caused by the date format that Jquery Valdiation was expecting from the field and that was indeed causing a validation error which is why it focused on that field. To get around this problem and to allow me to submit the date in a UK format I did the following using the addMethod.

    $(function () {
        $.validator.addMethod("deliverydate", function(value, element) {
            var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
            return value.match(dateReg);
        },
        "Invalid date"
    );
    $('#form').validate({
        submitHandler: function(form) {
            form.submit();
        }
    });
});

Upvotes: 1

Related Questions