Medium Editor + jQuery Validate

[davidhellmann]

Anyone using the medium editor with jQuery Validate Plugin and give me a hint how I can validate the Editor Field?

[hraynaud]

Have the same question. I can validate the field but if delete the contents the field still has "<p></br></p>" empty paragraph with a line return in it. Which when validated causes a jquery error

[nmielnik]

A few questions:

1) Are you folks using a <textarea> inside the form as the editor element? I'm assuming that since you're using form validation, you're probably not using a <div> inside the form, you're allowing medium-editor to create a <div> that it keeps synchronized with the <textarea>

2) Is the issue with the <p><br/></p> the only issue that's breaking your use-case with the jQuery validate plugin? If so, I could potentially point you towards where in the code you could potentially fix this.

Please point out any other issues that you know of (if there are any). I'm thinking I can try to help suggest fixes, but it may be easier if you guy try to implement the fix, and you can verify that it will fix your use case before we merge it into the core code.

[hraynaud]

@nmielnik Thanks for the response.

1) Yes.

2) I had another issue. It appears that the chain of events that clears the errors (presumably some kind of blur or focusout event) was not getting properly triggered for hidden fields after the related field was correctly populated so the validation errors were not removed.

In my case I was using jquery-fileupload which on completion populates a hidden field on the form with the image url. My solution was to change the field to a normal text input with display none and then call trigger the blur event on it when the image upload completed. This solved the issue for me.

In the case of the <p><br/></p> I simply wrote a quick hack using the on("input") callback of the medium editor. It checks whether editor content just contains whitespace. If so I set the backing field value to blank and call blur. That seems to work for me.

    $(this).on('input', function() {
            var textLength = $(this).text().trim().length,
            , fieldName = $(this).data('field')
            , field = $("#" + fieldName)
      ;

       if(textLength > 0){
          field.val($(this).html());
        }else{
          field.val("");
        }

         field.blur();

Let me know if you have any other questions and other tips to share.

[nmielnik]

Just an FYI @hraynaud , the input event does not fire on elements with contenteditable=true in any version of IE. I don't know if jQuery did anything to account for this, but last I had checked it hadn't.

If you were interested, you can find the code which listens for changes to the contenteditable and synchronizes them back to the <textarea> here in core.js. I could definitely see a use case for creating something like a clearEmptyTextarea option (the name needs work) where if the contenteditable appears empty to the user (just <p><br/></p> or whitespace characters) that the <textarea> will be set to empty instead of the direct contents of the html.

Would you be interested in adding in something like this and see if it fixes your use case? It seems like you would certainly not be the only one running into this problem, so we could just point future users towards this new option.