Goal
Adding property required=true on dialog widget node marks the field required in a dialog. So user cannot leave the field empty and save dialog; required flag is supported on some granite (coral) widgets like textfield
This post is on adding necessary js logic for supporting required flag on Touch UI Rich Text Editors
For a similar extension on AEM 62 supporting required on File Upload (Image) check this post
Demo | Package Install
Inline Dialog
Full Screen Dialog
Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-rte-required
2 Create node /apps/touchui-rte-required/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies value underscore
3) Create file (nt:file) /apps/touchui-rte-required/clientlib/js.txt and add
required.js
4) Create file (nt:file) /apps/touchui-rte-required/clientlib/required.js and add the following code.
(function ($, $document) { var CORAL_RTE = ".coral-RichText", //copied from /etc/clientlibs/granite/coralui2/js/validations.js fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' " + "data-init='quicktip' data-quicktip-type='error' />"); $document.on("dialog-ready", function() { //coral validation framework ignores hidden and contenteditable fields, so add an invisible text field //the text field is just for registering a validator $(CORAL_RTE).after("<input type=text style='display:none'/>"); $(CORAL_RTE).on("input", function() { var $invisibleText = $(this).nextAll("input:text").val($(this).text().trim()); $invisibleText.checkValidity(); $invisibleText.updateErrorUI(); }) }); //register the validator on richtext invisible text field $.validator.register({ selector: ".richtext-container > input:text", validate: function ($invisibleText) { var $hidden = $invisibleText.prevAll("[type=hidden]"), isRequired = $hidden.attr("required") === true || $hidden.attr("aria-required") === "true"; if (isRequired && _.isEmpty($invisibleText.val())) { return $invisibleText.message("validation.required") || "required"; } return null; }, show: function ($invisibleText, message) { this.clear($invisibleText); var field = $invisibleText.prevAll(CORAL_RTE), arrow = field.closest("form").hasClass("coral-Form--vertical") ? "right" : "top"; fieldErrorEl.clone() .attr("data-quicktip-arrow", arrow) .attr("data-quicktip-content", message) .insertAfter(field); field.attr("aria-invalid", "true").toggleClass("is-invalid", true); }, clear: function ($invisibleText) { var field = $invisibleText.prevAll(CORAL_RTE); field.removeAttr("aria-invalid").removeClass("is-invalid") .nextAll(".coral-Form-fielderror").tooltip("hide").remove(); } }); })(jQuery, jQuery(document));
5) To mark a rich text editor required in dialog, set the property required to boolean true
Adobe Support | Adobe Customer Service | Support For Adobe
ReplyDeletehttp://www.techers247.com/adobe-support.html
Toll Free:+1-844-898-4398
Our certified and experienced technicians give immediate online Adobe Support and Adobe Customer Service for any sort of troubleshooting and other issues occurred in your adobe flash player or in other products.
Are you finding for Adobe Customer Service Number? If yes then check out the Adobe Usa,Canada helpline number @+1877-339-8403 and get most reliable Adobe technical support services.
ReplyDeleteThis doesnt works with AEM6.1 SP1. Please suggest what changes should be made to make it work with SP1
ReplyDeleteThis comment has been removed by the author.
DeleteSince this article refers to the old mini RTE, to make it work in 6.1 SP1, you need to do the below modifications :
ReplyDelete* change $invisibleText.prevAll("[type=hidden]"), to $invisibleText.prevAll(".coral-Textfield[type=hidden]"), in the function 'validate'
* In the function "show", this.clear($invisibleText); does not work since it can't find 'this'. So, simply replicate the code of the clear function here.
* Change the line 29 from : if (isRequired && _.isEmpty($invisibleText.val())) {
to if (isRequired && $(CORAL_RTE).data("rteinstance").getContent().length === 0) {
You will notice that you could still submit the touch dialog (form) even if the fields were marked red. If you add a class “foundation-validation-bind” on the submit button of the form, the dialog won’t be saved if any field inside it is marked red.
The support for 'required' field for RTE in dialog has been added in 6.2. Although, that has been handled a little differently. In 6.1, we were using a jQuery plugin – ‘jQuery.validator’ for validation. That has been deprecated in 6.2 and we are now using our own ‘foundation-validation’ API. The jQuery.validator plugin supports limited elements and selectors (it did not support ‘div’) but the new foundation-validation API allows to provide validation for any element. Since, RTE is actually a contenteditable div, the fix in 6.2 registers validation on that div. But, it won’t work in 6.1 due to jquery plugin. So, the solution in this blogpost is using an extra input field corresponding to RTE.
It is working for the ootb image component. when i was trying to do the same for my customized image component, it is not working .
DeleteThis comment has been removed by a blog administrator.
ReplyDelete