Expand my Community achievements bar.

SOLVED

On dialog submit display alert if textfields are emplty

Avatar

Level 3

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

Thanks in advance

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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;
        }

});

 

 

View solution in original post

3 Replies

Avatar

Employee Advisor

Hi @Dolly ,

Add the below attribute to the textfield node in dialog

required="true"

Below screenshot for your reference:

Screen Shot 2022-04-12 at 8.17.14 PM.png

Avatar

Correct answer by
Community Advisor

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;
        }

});