Jquery and Summernote validation

Question

Jquery and Summernote validation

I have been successfully doing jquery and summernote validation around for a long time now.

it worked and now I am getting form.valid () error. The comment field does not need to be checked.

I turned my code off to the bare minimum and reduced the Ignore options - if I remove the ignore settings it works, if I ignore the settings it breaks with "validator is undefined"

I installed the fiddle so you can see that it works and does not work, it is currently not working

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

+3

jquery validation summernote

JGuymer 10 Aug 14 at 10:57

source to share

3 answers

user1987392 · Answer 1 · 2014-11-07T13:30:18+0000

I have a similar problem.

First of all, you can set jquery.validate

to ignore hidden fields (IIRC, summernote has quite a few) other than the ones you want to check:

$.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...) });

This fixed it for me.

Also, whenever I interacted with the modal dialog to add 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 could:

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 (interim) fix is replacing form

with div

on line I marked // ERROR CAUSE

. I may be missing something, but I really don't see the point in having it as a form.

Changing this code is not recommended (you might want to update to newer versions, thereby losing your changes ...), but it's a pretty good fix until they resolve it.

Yannis Ps · Answer 2 · 2014-12-05T12:11:53+0000

I had the same problem. I traced the issue with subforms named "note-modal-form". To solve the problem, I added the following in the initialization section:

var validateform = function () {

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

Ryza · Answer 3 · 2017-09-09T04:16:34+0000

I had the same problem, it turned out that summernote has hidden fields with no names. It doesn't help with validation, you can either ignore the fields or just go to summernote js js code and add the name like I did. Hope this helps.

Input fields are available for modals that come out of summernote for things like adding ur. enter image description here

Jquery and Summernote validation

More articles: