Conflict between Jquery Validate and Asp.net MVC
- by chobo2
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.
