On dialog submit display alert if textfields are emplty | Community
Skip to main content
Level 3
April 13, 2022
Solved

On dialog submit display alert if textfields are emplty

  • April 13, 2022
  • 2 replies
  • 953 views

We have 2 textfields (firstname and secondname). If either of the 2 textfields are empty, on dialog submit, display an alert. 

Thanks in advance

Best answer by Dipti_Chauhan

HI @dolly 

  as per your requirement you need to add your custom login on dialog submit .Sharing example snippet (this is just a example code, will not get compiled as is )

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

        var $form = $(this).closest("form.foundation-form");
        var message;
        var fui = $(window).adaptTo('foundation-ui'),
            options = [{
                id: 'ok',
                text: 'OK',
                primary: true
            }];

        var field1= $form.find("[name*='./field1']").val();
        var field2= $form.find("[name*='./field2']").val();

   //PUT YOUR LOGIC HERE
           message = "ADD ERROR MESSAGE HERE";
        }
        if (message) {
            fui.prompt("Error", message, "default", options);
            return false;
        }

});

 

 

2 replies

Anish-Sinha
Adobe Employee
Adobe Employee
April 13, 2022

Hi @dolly ,

Add the below attribute to the textfield node in dialog

required="true"

Below screenshot for your reference:

Dipti_Chauhan
Community Advisor
Dipti_ChauhanCommunity AdvisorAccepted solution
Community Advisor
April 13, 2022

HI @dolly 

  as per your requirement you need to add your custom login on dialog submit .Sharing example snippet (this is just a example code, will not get compiled as is )

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

        var $form = $(this).closest("form.foundation-form");
        var message;
        var fui = $(window).adaptTo('foundation-ui'),
            options = [{
                id: 'ok',
                text: 'OK',
                primary: true
            }];

        var field1= $form.find("[name*='./field1']").val();
        var field2= $form.find("[name*='./field2']").val();

   //PUT YOUR LOGIC HERE
           message = "ADD ERROR MESSAGE HERE";
        }
        if (message) {
            fui.prompt("Error", message, "default", options);
            return false;
        }

});

 

 

DollyAuthor
Level 3
April 13, 2022

This worked. Thanks @dipti_chauhan