I have a "change password" page, for which it is necessary to transfer all the passwords entered on the page through Javascript before sending. To complicate it, the page is loaded via the jQuery load () call and sent by the jQuery.Form ajaxForm () call. Everything works in MVC2, but MVC3 gives me problems.
Thus, I have a page with the “Change password” link that, when clicked, loads the page with change passwords into the jQuery popup window, after which the form on the page with the change password is passed through the jQuery.Form library (essentially just wraps the $ call .ajax) and returns the result to the modal popup window of the mod.
Essentially, I have a model with two properties: OldPassword and NewPassword. I have two hidden fields created by view for them. They store the hashed value of two other fields, PrehashOldPassword and PrehashNewPassword, and are updated using keyup events (I know this means that the entire SHA256 hash on each keyboard ... is inefficient, but got a job for testing). The key point here is that the validation and required field validation must be performed in these preliminary fields that exist only on the client side (since, obviously, I do not want to transfer these fields to the server in any way).
So, I manually create these two and add data-val- * attributes to the elements, i.e. they are NOT generated by MVC helpers, etc. I guess this is where I am missing something. When a form is submitted with all fields empty, all pop-ups should appear, but the form goes straight ahead and is sent anyway.
==
So all I have tried:
Yes, the unobtrusive parse () method of the library has already been called to parse the contents of the loaded AJAX form, and it seems to load all the data correctly to validate the data, since I see that the errors appear as blur () fields and when I click submit ( before the ajax request completes and replaces the contents of the popup).
Possible note: this invocation of the method of unobtrusive analysis of the library occurs AFTER AJAX successfully loads the password change page in a pop-up window ... the binding to the form of the AJAX is placed in the document.ready of the downloaded content, ergo, AJAX binding to the presentation of the form MAY be required before and thus dismissal to the point that validation calls that the parse method can associate with the send event ...
However, (1) I do the same in other places without problems, the ONLY DIFFERENCE is that I manually put these data-val- * attributes into the elements that I create manually! And (2) if I cause any error in the OldPassword or NewPassword fields, that is, the required field validation error without loading a value in them, they display their error and successfully stop the form from sending via the jQuery.Form method.
So, I think something is wrong here:
<input id="PrehashNewPassword" type="password" name="PrehashNewPassword" data-val-required="The password field is required." data-val-regex-pattern="<%= RegexHelper.PasswordRegularExpression %>" data-val-regex="<%= RegexHelper.PasswordRegularExpressionError %>" data-val="true" />
I know that jquery.validate corrects correctly, as I see errors. It just does not stop submitting the form when it is an error in these manually created elements, unless I do something like this and add a callback before submitting to the AJAX form:
$("#ChangePasswordForm").ajaxForm({ beforeSubmit: function () { if (!$('#ChangePasswordForm').valid()) { return false; } }, target: '#overlay' });
While this works, it is disgusting, and I believe that it causes a repeat of validation twice ... Not a huge deal, but not perfect. So, is there any other challenge I need to make in an unobtrusive library in order to link them?