Jquery Validation and Summernote

Question

I have been running jquery validation and summernote side by side for a while now successfully.

it was working and now I am getting an error on form.valid(). The note field doesn't need to be validated.

I have stripped my code down to the bare minimum, and whittled down the Ignore settings - if I remove the ignore settings it works, if I have ignore settings, it breaks, with a "validator is undefined" error

I have set up a fiddle so you can see it working and not working, it's currently set not to work

http://jsfiddle.net/JGuymer/83q0r21s/22/

<form id="form">   
<textarea id="textarea"></textarea>
<a id="clickme" href="#">click Me</a>
</form>

JQuery:

$(document).ready(function() {
    $("#textarea").summernote();
    //uncomment to work
    //$('#form').validate();       
    //uncomment to fail
    $('#form').validate({ignore:[]})     
    $("#clickme").click(function(){      
        validate();         
        return false;
    })
});

function validate() {
 if ($('#form').valid()) {
 alert('valid');
 }
}

Any ideas would be appreciated

Thanks James

Answer 1

I have a similar issue.

First of all, you can set jquery.validate to ignore hidden fields (IIRC, summernote has quite a few) except the ones that you want to validate:

$.validator.setDefaults({ ignore: ":hidden:not(.class-of-hidden-field-i-want-to-validate-1, class-of-hidden-field-i-want-to-validate-2, class-of-hidden-field-i-want-to-validate-3...) }); 

That fixed it for me.

Also, whenever I interacted with the modal dialog for adding a link (summernote v0.5.10), I got

Uncaught TypeError: Cannot read property 'settings' of `undefined`

on jquery.validate.js:360.

Looking at summernote.js I can could they have:

var tplDialog = function (className, title, body, footer) {
        return '<div class="' + className + ' modal" aria-hidden="false">' +
                 '<div class="modal-dialog">' +
                   '<div class="modal-content">' +
                     (title ?
                     '<div class="modal-header">' +
                       '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                       '<h4 class="modal-title">' + title + '</h4>' +
                     '</div>' : ''
                     ) +
                     '<form class="note-modal-form">' + // ERROR CAUSE
                       '<div class="modal-body">' +
                         '<div class="row-fluid">' + body + '</div>' +
                       '</div>' +
                       (footer ?
                       '<div class="modal-footer">' + footer + '</div>' : ''
                       ) +
                     '</form>' + // ERROR CAUSE
                   '</div>' +
                 '</div>' +
               '</div>';
    };

My (temporary) fix is replacing form with div in the line I marked with // ERROR CAUSE. Perhaps I'm missing something but I don't really see the point in having that as a form anyway.

Changing this code is not recommended (you might want to update to newer versions, thus losing your changes...), but this is a good enough fix until they solve it.