Conflict between Jquery Validate and Asp.net MVC

Question

Hi

I am using asp.net mvc 2.0 and jquery validate 1.7 (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

What happens is this. A user can click on a link to edit a product. When a user clicks on which product they want to edit a jquery dialog box appears with a form of textboxes and dropdown lists.

These html controls have information filled in them. Say if the user chooses to edit the Ipad product a dialog will appear and one of the form textboxes will have "Ipad" in it.

Now this form gets rendered on the server side(the form is in a partial view). When loading the dialog box a ajax request is made to get that partial view and in the response part of the ajax call I do something like

$('#EditDialog).html(ajaxresponse).dialog({...});

So I would have something like this rendered in my dialog box

<form id="EditProduct">
Product Name: <input type="text"  value="IPad" name="ProductName" />
</form> 

Now my jquery validate would be something like this.

 $("#EditProduct").validate(
           {
               errorContainer: "#Errorbox",
               errorLabelContainer: "#Errorbox ul",
               wrapper: "li",
               rules:
               {
                   ProductName: "required"
               }
           });

So I know this works because I use the same validate for add product and if you try to leave ProductName blank it will show a validation error.

Now it does not work with the edit one though and I think I know the reason why but not how to fix it.

The value for the textbox is "IPad" this is how the Html.TextBoxFor() renders it. However if a user goes and changes the product name to "Iphone" or blank the value never changes. It is always "Ipad" in the html.

So I think when the validate goes and looks it goes oh there is a value already in it. It is valid even though in reality it might be blank.

When I post to the server through ajax it gets the right value and the server side validation stops it but my entire clientside validation is rendered useless because of this problem as it will never change the html.

Answer 1

This doesn't seem quite right!

Imagine in the "add" case, the HTML you render looks something like this:

<form id="AddProduct">
Product Name: <input type="text"  value="" name="ProductName" />
</form>

So the "HTML" has a blank value, yet the validation plugin can correctly tell once ProductName has been filled?

I'm not exactly sure what the issue is, but if you have a debugger (i.e. Firebug), try putting a break in the validation plugin, within the "check" function (~line 475 in 1.6). You should be able watch element.value to see if it has figured out the correct user-edited value.