javascript - AEM 6.1 Touch UI Dialog - invoke dialog validation event manually - Stack Overflow

admin管理员组

文章数量:1414643

I have some callback on dialog-submited event and I want to find out way to guarantee that dialog will be submitted after my callback (the validation after my callback can inhibit me). Can I pre validate manually whole dialog (every widget) if I'm not aware how much widgets exist on dialog. Maybe there is something in order to invoke this validation?

I have some callback on dialog-submited event and I want to find out way to guarantee that dialog will be submitted after my callback (the validation after my callback can inhibit me). Can I pre validate manually whole dialog (every widget) if I'm not aware how much widgets exist on dialog. Maybe there is something in order to invoke this validation?

• javascript
• java
• jquery
• dialog
• aem

Share Improve this question Follow asked Jun 11, 2016 at 16:53 AlexAlex 14922 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

AEM has made a few methods available to you through a jQuery plugin:

$input.willValidate()
$input.checkValidity()
$input.validationMessage()
$input.setCustomValidity(errorMessage)
$input.updateErrorUI()

For your particular requirement, you can get all the fields in the form, loop through them and check their validity. Use a jQuery selector to find all the form fields; you might have a custom CSS class name on your field elements or you might have a custom Class name on your form for example.

function validateForm() {
    var valid = true;

    /* Select the form fields, will be project specific. */
    var $formFields = $('.dialog-selector .coral-Form-field');

    $formFields.each(function(){
        if (!$(this).checkValidity()) {
            valid = false;

            /* Break out of each loop */
            return false;
        }
    });

    return valid;
}

See this blog post regarding AEM Touch UI Validation and this AEM Touch UI Validation Library on GitHub for more examples.

Please have a look at this Adobe Helpx article: Link:- https://helpx.adobe./experience-manager/using/creating-touchui-validate.html //Validating Adobe Experience Manager Touch UI dialog values

Step 1: Create a ponent under /apps/

Step 2: Create cq:dialog for touch UI dialog and all the items required.

Step 3: Create clientlibs under the ponent folder. Add ‘cq.authoring.dialog‘ as categories. This enables to use all the functions available in Granite UI.

Step 4: Add a script which has the validation logic using JQuery (ex: validation.js). Make sure you add that js in the js.txt file

Code:-

(function (document, $, ns) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),
            emailid = $form.find("[name='./email']").val(),
               message, clazz = "coral-Button ",
         patterns = {
             emailadd: /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i
        };

        if(emailid != "" && !patterns.emailadd.test(emailid) && (emailid != null)) {
                ns.ui.helpers.prompt({
                title: Granite.I18n.get("Invalid Input"),
                message: "Please Enter a valid Email Address",
                actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                }],
            callback: function (actionId) {
                if (actionId === "CANCEL") {
                }
            }
        });

        }else{
                 $form.submit();
        }
    });
})(document, Granite.$, Granite.author);

Please read full article, it will tell you step by step approach to achieve the needful.

Some Reference Adobe Community Posts are:- Link:- http://help-forums.adobe./content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__wfdy-i_have_gonethroughh.html

Link:- http://adobeaemclub./aem-touch-ui-dialog-validation/

Great Link:- http://www.nateyolles./blog/2016/02/aem-touch-ui-custom-validation

I hope this will help you.

Thanks and Regards

Kautuk Sahni

本文标签： javascriptAEM 61 Touch UI Dialoginvoke dialog validation event manuallyStack Overflow