4

I'm trying to add validation to a dynamic input field. What I'm doing is basically hide and show a field (having both loging and register form in 1) like this:

<div id="RegBoxStorage" style="display: none;">
    @Html.LabelFor(m => Model.Name)
    @Html.TextBoxFor(m => Model.Name)
    @Html.ValidationMessageFor(m => m.Name)
</div>
@using (Html.BeginForm("Login", "Auth", FormMethod.Post, new { id = "AuthForm" }))
{
<div id="RegBox" style="display: none;">
</div>
<div id="LoginBox">

    @Html.LabelFor(m => Model.Email)
    @Html.TextBoxFor(m => Model.Email)
    @Html.ValidationMessageFor(m => m.Email)

    @Html.LabelFor(m => Model.Password)
    @Html.TextBoxFor(m => Model.Password)
    @Html.ValidationMessageFor(m => m.Password)
</div>
<input type="submit" id="BtnAuthSub" value="Login" />
or <a id="ToggleAuth" href="#">Sign Up</a>
}

The script:

$('#AuthForm').removeData("validator");
$('#AuthForm').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(this.authForm); // error here

The plugin:

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    //use the normal unobstrusive.parse method
    $.validator.unobtrusive.parse(selector); //Error here

    //get the relevant form
    var form = $(selector).first().closest('form');

    //get the collections of unobstrusive validators, and jquery validators
    //and compare the two
    var unobtrusiveValidation = form.data('unobtrusiveValidation');
    var validator = form.validate();

    $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
      if (validator.settings.rules[elname] == undefined) {
        var args = {};
        $.extend(args, elrules);
        args.messages = unobtrusiveValidation.options.messages[elname];
        //edit:use quoted strings for the name selector
        $("[name='" + elname + "']").rules("add", args);
      } else {
        $.each(elrules, function (rulename, data) {
          if (validator.settings.rules[elname][rulename] == undefined) {
            var args = {};
            args[rulename] = data;
            args.messages = unobtrusiveValidation.options.messages[elname][rulename];
            //edit:use quoted strings for the name selector
            $("[name='" + elname + "']").rules("add", args);
          }
        });
      }
    });
  }
})($);

So when a user clicks ToggleAuth, i move the content from RegBoxStorage to RegBox inside the form. Now I need to manually add the validation to the input. All the unobtrusive validation attributes are already on it. So from this answer, i tried it and says $.validator is undefined.

But the other parts of the form is actually validated, showing that validation works, I have both jquery.validation and jquery.validation.unobtrusive validation referenced. What could be the problem?

I also took the plugin extension from this blog.

2
  • Can you add your javascript code?
    – MorioBoncz
    Aug 8, 2011 at 22:36
  • I had the same issue, problem was MVC4 does not render the validate bundle by default in _Layout.cshtml. Oct 8, 2012 at 5:36

1 Answer 1

7

Check few things:

  • You have written extension but still in section Script use $.validator.unobtrusive.parse(this.authForm) - make sure you use parseDynamicContent.

  • Make sure you reference validation.js and validation.unobtrusive.js before the plugin code.

  • Make sure your Script section is inside jQuery document.ready function and executes after the plugin.
1
  • 3
    In my case, it turns out i kept thinking i had the right script included, but in reality it was jquery.unobtrusive-ajax and not jquery.validate.unobtrusive .... took me a while before i spotted it.
    – Jim Wolff
    Aug 9, 2013 at 7:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.