1

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.

Improve this question
6
  • There are a lot of tags here. If the validation doesn't even send the request, then the issue is with the validation, not PHP (since you say it doesn't even get that far). Only add tags that are relevant to the issue. Commented Jul 20, 2023 at 8:43
  • If you want effective help, show us the relevant code. Show us the remote PHP function. Show us the relevant rendered HTML. Commented Jul 20, 2023 at 17:58
  • "Any idea why remote is not even sending a request?" - Maybe because the field is empty? Why would you use remote to evaluate that the field is "required"? You do not need the server to tell you when a field is empty. This approach makes absolutely no sense. Typically, remote is used to send the field's data to the server to compare it to something that can only be learned on the server... like when a username is already taken. You wouldn't send "nothing" to the server when you'd already know it's nothing before you send it. Commented Jul 20, 2023 at 18:02
  • Is name="mainfield" an actual <textarea></textarea> element? The Validate plugin does not work on div elements or anything else that is not a data input for a <form>. Inspect your DOM to be sure. Commented Jul 20, 2023 at 18:12
  • @Sparky I am using remote because this textarea is using summernote where val will not work. Thats why I need to check $("#mainfield").summernote('isEmpty') and get back status from php. Also it is empty but not exactly empty due to summernote. If i only put required validation it always comes true does not check if summernote component is actually empty. Commented Jul 21, 2023 at 7:10

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Tried that. Somehow did not work. Then I tried to initialize validator from console and put in $("#addmain").valid("sumnoteempty"); which validates to true always. Don't know why this is happening. Any ideas what might have gone wrong?
@RohitS, does the element being validated contain a name attribute? Is the data inside a textarea or something else? Keep in mind that jQuery Validate can only validate the actual form input elements, input types, textarea, and select. If the actual data element is hidden, it is skipped for validation so you need to adjust the ignore option. Then you have to write a handler to programmatically trigger validation on the element that contains the actual data. There are a lot of similar questions about this. Look up Select2 and jQuery Validate for similar examples.
Update2- Thank you for your clue. My issue is partially resolved with add method. and then I added bellow code- $.validator.setDefaults({ ignore: "" }); This worked and now field is actually validated but error is showing bellow hidden text area. I fixed it with error placement. Now error is showing where it should be showing but as it is error for hidden element when I add text to summernote element error does not disappear as my textarea element values are not changed. It only disappear when I submit. How to handle this?
@RohitS - Use a custom handler to hide, not destroy, the label element containing the message. Trigger it using the .valid() method. On focus out of Summernote (or something else), if field is valid, then hide error label.
0 
$('#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();
                    }
                });
Improve this answer

2 Comments

most try this => ignore: ".note-editor *"
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.