jqueryjquery-validatesummernote

Summernote validation with Jquery Validation plugin

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.

Solution

  • 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: