0

I am stuck here and would very much appreciate help. I have a form in a razor view with a input field for current city which looks like this:

@Html.LabelFor(x => x.UserModel.CurrentCity)
@Html.TextBoxFor(x => x.UserModel.CurrentCity, new { @data_bind = "value: UserModel.CurrentCity ", @class = "city", @data_val = "true", @data_val_required="City is required" })
@Html.ValidationMessageFor(x => x.UserModel.CurrentCity)

I want autocomplete for this field and am using jquery token input plugin for this like:

$(".city").tokenInput('@Url.Action("AutocompleteCity", "Settings")',{ minChars: 2, tokenLimit: 1, hintText: "Type in a city" });
$(".city").tokenInput("add", {name: viewModel.UserModel.CurrentCity()});

Everything works fine except the clientside unobtrusive validation. The form gets posted even if CurrentCity is empty.

I also tried to change the MVC helpers to plain html:

<input data-val="true" data-val-required="City is required" type="text" class="city" data-bind = "value: UserModel.CurrentCity, attr: { name: 'UserModel.CurrentCity', id: 'UserModel.CurrentCity'}" />
<span class="field-validation-valid" data-valmsg-for="UserModel.CurrentCity" data-valmsg-replace="true"></span>

This approach prevents the form from being submitted but the validation-error class is not injected into the span and the error message does not show up.

Any suggestions?

Jenny Pettersson
  • 241
  • 4
  • 17
  • Is the client side validation working for other form elements on the same page? Are there any javascript errors before or after interacting with the field? Does the validation work if you remove tokenInput? – Colin Young Jan 11 '13 at 20:49
  • Yes, I have a lot of fields in this form and all of them are working and validating correctly except the ones where I am using tokeninput. No javascript errors. – Jenny Pettersson Jan 12 '13 at 07:53
  • To confirm, if you remove tokeninput from that field, that field also validates correctly, showing the error message? Which browser are you using and how are you confirming that the message is not inserted into the span? – Colin Young Jan 14 '13 at 16:42
  • Yes, that is correct. I am using chrome developer tools. – Jenny Pettersson Jan 16 '13 at 12:40

1 Answers1

0

The original input element you created is hidden. You will likely need to enable validation of hidden elements: jquery.validate v. 1.9 ignores some hidden inputs or https://stackoverflow.com/a/13295938/173225.

Community
  • 1
  • 1
Colin Young
  • 3,018
  • 1
  • 22
  • 46
  • Hoorah!! Adding $.validator.setDefaults({ ignore: ""}); solved the problem. Thank you very very much for pointing me in the right direction :) – Jenny Pettersson Jan 16 '13 at 22:39