Summernote validation with Jquery Validation plugin

Question

I have a form with a remote validation field. My Javascript is as bellow:

$("#myform").validate({
        rules: {
        mainfield: {
          remote:{
              url: "checksnote.php",
              type: "POST",
              data: {
                mainfield: function() {
                return $("#mainfield").summernote('isEmpty');
              }
            }
          }
        }
        },
        messages:{
          mainfield: {
            remote: "This field is required",
            //minlength: "Minimum Length is 10"
          }
        },
        submitHandler: function(form) {
          alert("Successfully submittable");
          console.log("Successfully submittable");
          form.submit();
        }
      });

Problem is I am unable to get any response at all. Both the remote requests show valid but no ajax request is seen in the browser. Mainfield is summernote textarea. All other validations are working perfectly fine. Any idea why remote is not even sending a request?

Update- I also tried to add Method did not work. Thats why I tried remote instead. Either one is fine if works for me. This is my method code. Browser is not showing any error.

$.validator.addMethod('sumnoteempty', function(value,element){
        //return false;
        if(element.summernote('isEmpty')){
          console.log("In summernote validation!");
          return false;
        }
        else {
          return true;
        }
      }, "Must enter summernote content");

Rules are as bellow:

rules: {
mainfield: {
    sumnoteempty: true
}
},
message:{
   sumnoteempty: "Field can not be empty"
}

I dont understand what I am doing wrong here. It does not even show message in console. All other validation logic is working great. Except remote and add method.

Answer 1

There is no need to query the server to evaluate when a field is left empty. Create a custom rule that uses the Summernote isEmpty method.

jQuery.validator.addMethod("requiredSummernote", function() {
    // true to pass validation
    // false to FAIL validation
    return !($("#mainfield").summernote('isEmpty'));
}, 'Summernote field is required');

$("#myform").validate({
    rules: {
        mainfield: { // name attribute
            requiredSummernote: true;  // apply the custom rule
        }
    },
    ....

https://jqueryvalidation.org/jQuery.validator.addMethod/

Since Summernote hides the original textarea element and constructs its own, you will need to do several other things to pull this all together:

• Edit the ignore option of the Validate plugin in order to force validation of the hidden textarea element. Hidden elements are ignored by default.

• Use the errorPlacement option to alter where the validation message appears on the screen. It may be out of place since the actual data input element is hidden.

• You may need to construct handlers that programmatically trigger validation. Since the actual data element is hidden, validation needs to be triggered with a blur or change handler and the .valid() method which forces a test.

• Conversely, if the error message will not go away, construct a handler that is triggered on blur that calls .valid() and then hides the label element containing the error message.

Answer 2

$('#product').validate({
                    ignore: ".note-editor *",
                    rules: {
                        description: {
                            required: true
                        }
                    },
                    messages: {
                        description: {
                             required: "Description is required.",
                        }
                    },
                    errorPlacement: function(error, element) {
                        error.css('color', 'red').appendTo(element.parent("div"));
                    },
                    submitHandler: function(form) {
                        $(':button[type="submit"]').prop('disabled', true);
                        form.submit();
                    }
                });