Add Validation Rules Dynamically to MVC3

Question

All,

I need to add validation rules to dynamic form input text elements added by the user.

I am accomplishing this by cloning a chunk of HTML, providing unique ids and adding to the DOM

I researched the syntax for this, which I believe is correct yet I am getting the following JS error when I try to access the .rules method:

TypeError: $(...).rules is not a function

Caused by this:

$("input[type=text].validateRequired").each(function () {

     $(this).rules("add", { required: true, messages: { required: "Data is missing" }   

   });     
 });

When I examine $(this) in FireBug, I do not see a .rules method yet it exists in the validation scripts and all of the documentation shows that the method should be available globally. Not sure how to get it in scope.

Here are the code pieces in the View related to this problem:

JS Includes

    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

JS Method that creates the dynamic form elements

<script type="text/javascript">
    $(document).ready(function() {

        var uniqueId = 1;
        var ctr = 1;
        $(function() {
            $('.js-add-cosponsor-hyperlink').click(function() {

                var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow');
                var cosponsorDivId = 'cosponsors_' + uniqueId;
                var copyText = copy.html();

                copyText = copyText.replace(/Guitar1/g, 'Guitar' + ctr);
                copyText = copyText.replace('Guitar_1', 'Guitar_' + ctr);
                copy.html(copyText);
                $('#cosponsorsTemplate').attr('id', cosponsorDivId);



                var deleteLink = copy.find("a.icon.delete");
                deleteLink.on('click', function() {
                    copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal

                });


                $.validator.unobtrusive.parse(form);
                $("input[type=text].validateRequired").each(function () {

                    var t = $(this);
                    $(this).rules("add", { required: true, messages: { required: "Data is missing" } });
                });

                uniqueId++;
                ctr++;
            });
        });
    });

</script>

*The Form*

    @using (Html.BeginForm())
    {
      [...]


       <!-- Template used to do the Clone: These need dynamic validation -->

       <div style="display:none">
         <div id="cosponsorsTemplate">
                <div class="formColumn1"><label>Guitar</label></div>
             <div class="formColumn2">@Html.TextBoxFor(model => model.Guitar1.Make, new { Placeholder = "Make", Class = "validateRequired" })
               <div class="messageBottom"> 
                           @Html.ValidationMessageFor(model => model.Guitar1.Make)
                </div>
             </div>
                <div class="formColumn3">@Html.TextBoxFor(model => model.Guitar1.Model, new { Placeholder = "Model" , Class = "validateRequired"})
                    <div class="messageBottom"> 
                        @Html.ValidationMessageFor(model => model.Guitar1.Model)
                    </div>
                </div>
                 <div class="formColumn4">@Html.TextBoxFor(model => model.Guitar1.ProductionYear, new { Placeholder = "Production Year", Class = "validateRequired" })
                             <div class="messageBottom"> 
                                 @Html.ValidationMessageFor(model => model.Guitar1.ProductionYear)
                             </div><a class="icon delete">Delete</a>
                          </div>

          </div>
    </div>    
    <!-- End Add Co-Sponsor Row Template -->
    }

Roshan Srivastava · Accepted Answer · 2014-02-05 13:43:10Z

0

You are cloning a chunk of HTML so every time you do a clone you need to parse the whole form by using $.validator.unobtrusive.parse

answered Feb 5, 2014 at 13:43

Roshan Srivastava

4763 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slinky Over a year ago

cannot get to that either: TypeError: $.validator is undefined $.validator.unobtrusive.parse(form);

Anirudha Gupta Over a year ago

it's look like you don't have included the right reference of Javascript Vaidate plugin. See this post stackoverflow.com/questions/12407312/…

Slinky Over a year ago

the libraries are there as they do unobtrusively validate the non-dynamic elements just fine - this is really strange

Collectives™ on Stack Overflow

Add Validation Rules Dynamically to MVC3

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related