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? — neebz, Apr 14 '11 at 13:21
Hi, quick test shows same rendered html works when not inside . Validation seems broken inside them. I need this for ko and templating so not sure how to get round this... — jaffa, Apr 14 '11 at 13:44

score 7 · Accepted Answer · answered Apr 14 '11 at 20:57

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 '11 at 20:57

RP Niemeyer

113,706
17
286
210

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'? – jaffa Apr 15 '11 at 08:45
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: http://jsfiddle.net/rniemeyer/UtvPS/ – RP Niemeyer Apr 15 '11 at 14:25
@Jon - just curious if you found a solution that worked and/or if you still had problems after the previous comment. – RP Niemeyer Apr 16 '11 at 14:23
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 Apr 19 '11 at 11:50
My form validation works as you said but I called it like so: hookupValidation: function(nodes) { $.validator.unobtrusive.parse($("#frmAdd")); }, – jaffa Apr 21 '11 at 14:11

score 0 · Answer 2 · edited May 23 '17 at 12:03

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 '17 at 12:03

Community

1
1

answered Apr 14 '11 at 14:10

neebz

10,993
6
44
61

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. – jaffa Apr 14 '11 at 15:18
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? – neebz Apr 14 '11 at 18:39

jQuery validation fails when using KnockoutJS and Jquery dialog

2 Answers2

Linked