CODEWITHSUNDEEP
jqueryvalidationsummernote
JGuymer
JGuymer

Reputation: 85

Jquery Validation and Summernote

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

Upvotes: 4

Views: 13762

Answers (3)

Mureithi Maina
Mureithi Maina

Reputation: 429

I had the same problem, it turns out that summernote has hidden fields without names. That fails on validation, you can either ignore the fields or just go to summernote js js code and add a name, as I did. Hope this helps.

The input fields are there for modals that popout of summernote for stuff like add a ur.enter image description here

Upvotes: 0

user1987392
user1987392

Reputation: 3991

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.

Upvotes: 3

Yannis Ps
Yannis Ps

Reputation: 21

I had the same problem. I traced the problem to the sub-forms named 'note-modal-form. To resolve the issue I added the following in the initialisation section:

var validateform = function () {

    $('.note-modal-form').each( function() { $(this).validate({}) });
...

Upvotes: 2

Related Questions