I am using the validation summary in an MVC 5 project. As part of the blog module I am using tinymce. In order to get the validation to look and react the same I had to manufacture a lot on the client. So instead I decided to not user the validation message.
So when there is input I want the validation summary to reflect that the field is now valid. I assumed that just calling the $(‘form’).validate() function would handle this but it doesn’t. I am able to self populate the validation summary with the errors
in the $(‘form’).bind("invalid-form.validate", ….. but it doesn’t re-fire on the validate call. Am I missing something to get this functionality?
//invalid form event $("form").bind("invalid-form.validate", function (form, validator) { $('#content_placeholder').stop().animate({ scrollTop: '0' }, 400, function () { $('#validation_panel').stop().slideDown('slow'); }); tinymce.activeEditor.getBody().style.backgroundColor = "#ffe3e3" tinymce.activeEditor.getContentAreaContainer().style.border = "1px solid #ff0000"; if (validator.errorList.length > 0) { var valUl = $('.validation-summary-errors ul'); valUl.html(''); $.each(validator.errorList, function (index, error) { console.log(error); valUl.append('<li>' + error.message + '</li>'); }); } }); //end of invalid form event $('input[type=text]').on('blur', revalidate); $('input[type=text]').on('keyup', revalidate); function revalidate() { if (submitClicked) { var errorMsg = $(this).data('val-required'); var lis = $('.validation-summary-errors ul').children(); $.each(lis, function (index, li) { if ($(li).html() === errorMsg) { $(this).remove(); } }); $('form').validate(); } }
Thanks in advance!
The .validate() method is used to setup validation. If you call it a second time, it performs no action but returns the validator object. To force validation, just call .valid() as specified in the docs.