jQuery validation fails when using KnockoutJS and Jquery dialog

Question

I have a form which is rendered using html.RenderAction in MVC3.

Outside of this I have a jquery template used with knockout. The model is rendered correctly into the view with the default 'data-val-required' attributes.

However I've noticed that jQuery validation always returns true.

<div id="dlgAdd" data-bind="template: { name: 'editTemplate', data: selected }">
</div>
<script id="editTemplate" type="text/html">  
<div> 
@{
    Html.RenderAction("EditDialog");
}
</div>    
</script>

The EditDialog partial renders the following output like so:

 <form method="post" id="frmAddNew" action="/Project/AddNew"> 
    <div class="fields-inline">         
       <div class="editor-label">             
          <label for="Name">Name</label>         
       </div>         

       <div class="editor-field">
          <input data-val="true" data-val-required="The Name field is required." id="Name" name="ko_unique_41" value="" type="text">
          <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
       </div>
    </div>
    <span id="validationmessage" class="field-validation-error"></span>   
  </form>

However, when I call $("#frmAddNew").valid()), it always returns 'true'. I don't know if its knockout, jQuery or mvc which is preventing the validation from returning false.

have you tried using it without knockoutjs to see if the validation works? — neeebzz
– neeebzz, Commented Apr 14, 2011 at 13:21
Hi, quick test shows same rendered html works when not inside <script type="text/html"></script>. Validation seems broken inside them. I need this for ko and templating so not sure how to get round this... — jaffa
– jaffa, Commented Apr 14, 2011 at 13:44

RP Niemeyer · Accepted Answer · 2011-04-14 20:57:00Z

7

Try calling $.validator.unobtrusive.parse(yourFormElement) to get your data- attributes related to validation parsed.

You could trigger it like:

<div id="dlgAdd" data-bind="template: { name: 'editTemplate', data: selected, afterRender: hookUpValidation  }">
</div>

then, hookUpValidation would look like:

hookUpValidation: function(nodes) {
    $.validator.unobtrusive.parse(nodes[0]);
}

answered Apr 14, 2011 at 20:57

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

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

5 Comments

jaffa Over a year ago

Hi, I tried that but not luck. It only seems to work when I add the class="required" explicitly to the mark-up, yet MVC3 renders the model so the markup includes data annotation attributes so that 'data-val-required' is used. Why would it work with 'required' but not 'data-val-required'?

RP Niemeyer Over a year ago

OK- I think that the issue could be that your form is wrapped in a div and nodes[0] that I listed would be that div. You need to call $.validator.unobtrusive.parse on the form. Try like: $.validator.unobtrusive.parse($("form", nodes[0])); . Here is a sample that uses the same scripts that MVC3 uses: jsfiddle.net/rniemeyer/UtvPS

RP Niemeyer Over a year ago

@Jon - just curious if you found a solution that worked and/or if you still had problems after the previous comment.

jaffa Over a year ago

I've just put this on hold while I get chance to re-visit it. Will let you know how I get on. Thanks again.

jaffa Over a year ago

My form validation works as you said but I called it like so: hookupValidation: function(nodes) { $.validator.unobtrusive.parse($("#frmAdd")); },

Community · Accepted Answer · 2017-05-23 12:03:12Z

0

I have looked into the code of jQuery validate and I think it doesn't work for dynamically added forms (which what Knockout does).

Take a look at this > Jquery Validation Plugin, dynamic form validation

You need to call the validate() method in a an event handler registered using the jQuery live() method. The live method links to all the dynamically added elements as well.

Let me know if it works.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Apr 14, 2011 at 14:10

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

2 Comments

jaffa Over a year ago

Mmm, seems strange that I have to use the 'mouseover' event to do this. Is there no other fix for this? I'm expecting the validation function should work ok with the jquery templates.

neeebzz Over a year ago

I think its not about the mouseover event but the live() method. You must be calling the validate() function in the submit event of the form. Was the event registered using the jQuery.live() method?

Collectives™ on Stack Overflow

jQuery validation fails when using KnockoutJS and Jquery dialog

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related