Disable MVC “must be a number” data type validation for a field

Question

I have a Telerik MVC ComboBox which contains a list of locations. The client wants the end user to be able to directly enter new locations into the list.

Upon submitting the form, it should accept a new value and insert into the locations table, and of course update the LocationID of the record being added to the ID of the newly inserted location.

Read below for code snippets

I've read that the ComboBox does allow you to enter in values that are not in the list, and used the demo ( Here )

Code to save location, edit locationID is not a problem. My problem here is that my Combo box contains a list of integer/string value pairs, not string/string. And thus, the issue I have in my code is that if I try and submit a new location name, it tries to validate it and says its not a number.

I need a way to try and suppress this validation, just for the LocationID field, but still protect against null values.

BEGIN EDITS

EDIT: I did find this post , but as the OP there says, the javascript hack is not very extensible, so I really want to avoid it.

EDIT:

I ended up using the javascript hack, its all I've found which works. I plan to encapsulate this in a method or attribute, and post it as an answer.

I found that with this hack, it did not work in Firefox or Chrome if I place the code block inside the document ready event using Telerik().ScriptRegistrar().OnDocumentReady(), the properly window.mvcClientValidationmetadata is somehow cleared when it reaches this event, even though the metadata are properly pushed in originally.

To get around this, I had to manually put the code in its own script block just under the form closing tag (which is where the client-side validation array is rendered).

END EDITS

Additionally, right now I'm binding to my model directly like so:

        public JsonResult Create(MyEntity Model)

I'm not sure how that's going to work out when it comes time to do model binding, I'm guessing it may just return an error, and I won't even reach my action method code.

So I guess the idea here would be to use a FormCollection in the method signature, detect for a non-integer LocationID, insert update, and then run UpdateModel()? Of course, welcome to better suggestions.

Thanks!

Code Snippets

Model:

class IntegerValueList
{
    public Int16 ID { get; set; }
    public string Name { get; set; }
}

        var lists = new Dictionary<string, IEnumerable<object>>();

        lists["Locations"] = (from record in db.Locations
                              orderby record.Name
                              select new IntegerValueList
                              {
                                  ID = record.LocationID,
                                  Name = record.Name
                              }).ToList();

Controller:

        LocationList = new SelectList(lists["Locations"], "ID", "Name", LocationID);

View:

                <td>
                    <div class="editor-field">
                        <%: Html.Telerik().ComboBoxFor(model => model.LocationID)
                                .BindTo(Model.LocationList)
                                .Filterable(c => c.FilterMode(AutoCompleteFilterMode.Contains)) 
                        %>

                        <%: Html.ValidationMessageFor(model => model.LocationID, "*") %>
                    </div>
                </td>

Answer 1

When I've had to do this in the past, I have used a textbox for the field with a label like "Enter Location", and then a dropdown below it with a label like "Or select...", and then use the onChange event of the dropdown to populate the textbox. Now you are not validating the dropdown.

You could even put a "Select" link next to the textbox and have the dropdown hidden until the link is clicked. The drawbback is that we could end up with San Diego, SanDiego and Sandiego all entered in the location list...but then your customer's requirement doesn't let us explicitly prevent that.