How to make a property as mandatory using EXTJS?

[GK-AEM]

Hi All,

I have custom dialog and it has text fields.I need to make these search text fields as mandatory and if there is no value for these text fields further action should not be happened and has to prompt an alert.

If any one come across this kind of requirement and please help me.

Thanks,

Kishore

[edubey]

use allowBlank=false

[edubey]

   What u mean by nothing is controlling? If you havent given any value in this field, dialog will give a prompt when try to click "OK" button.    

[GK-AEM]

Added this property and it's highlighting in red color but nothing is controlling.

[GK-AEM]

Controlling means when i click on OK button,nothing is prompting.

Below is the configuration.

"title": {
                    "fieldLabel":CQ.I18n.getMessage("Title"),
                    "fieldSubLabel":CQ.I18n.getMessage("Mandatory"),
                    "fieldDescription":CQ.I18n.getMessage('Title Is Mandatory To Create Category'),
                    "name":"title",
                    "allowBlank": false,
                    "blankText": CQ.I18n.getMessage("Title is a Mandatory Field"),
                     xtype: "textfield"

[edubey]

Are you able to see "*" mark near that textfield?, I am unable to see jcr:primaryType in your code, here is the simple example:-

<title jcr:primaryType="cq:Widget" allowBlank="false" fieldLabel="Image Title" name="./imagetitle" xtype="textfield"/>

[GK-AEM]

I could see * mark and also my jcr:primaryType is "cq:Panel".

var createCategoryDialog = {
        "jcr:primaryType": "cq:Dialog",
        "title":CQ.I18n.getMessage("Create Category"),
        "id": CQ.Util.createId("cq-createfolderdialog"),
        "height": 440,
        "params": {
            "_charset_":"utf-8"
        },
        "items": {
            "jcr:primaryType": "cq:Panel",
            "items": {
                "jcr:primaryType": "cq:WidgetCollection",
                "label": {
                    "fieldLabel":CQ.I18n.getMessage("Name"),
                    "fieldDescription":CQ.I18n.getMessage('The name that will appear in the URL, e.g. "myfolder"'),
                    "name":"label",
                    "vtype":vtype
                },
                "title": {
                    "fieldLabel":CQ.I18n.getMessage("Title"),
                    "fieldSubLabel":CQ.I18n.getMessage("Mandatory"),
                    "fieldDescription":CQ.I18n.getMessage('Title Is Mandatory To Create Category'),
                    "name":"title",
                    "allowBlank": false,
                    "blankText": CQ.I18n.getMessage("Title is a Mandatory Field"),
                     xtype: "textfield"

                },
                 "description": {
                    "fieldLabel":CQ.I18n.getMessage("Description"),
                    "name":"description",
                     xtype: "textarea"
                },
                 "EndofSupportLife": {
                    "fieldLabel":"End of Support Life/Expiration Date",
                    "name":"EndofSupportLife",
                     xtype: "datetime"
                },
                 "ProductIdentifier": {
                    "fieldLabel":"Product Identifier",
                    "name":"ProductIdentifier",
                     xtype: "textfield"
                },
                 "CreatedDate": {
                    "fieldLabel":"Created Date",
                    "name":"CreatedDate",
                     xtype: "datetime"
                }
            }
        },
        "buttons": {
            "jcr:primaryType":"cq:WidgetCollection",
            "custom": {
                "text":CQ.I18n.getMessage("Create"),
                "cls": "cq-btn-create",
                "handler":function() {
                    var title = this.getField("title").getValue();
                    var label = this.getField("label").getValue();
                    var description = this.getField("description").getValue();
                    var ProductIdentifier = this.getField("ProductIdentifier").getValue();
                    var EndofSupportLife = this.getField("EndofSupportLife").getValue();
                    var CreatedDate = this.getField("CreatedDate").getValue();
                    if (!label) {
                        label = title ? title : CQ.I18n.getMessage("Folder").toLowerCase();
                    }
                    if (!CQ.Ext.form.VTypes[vtype](label)) {
                        var dialog = this;
                        var msg = CQ.Ext.form.VTypes[vtype + "Text"];
                        msg += "<br/><br/>";
                        msg += CQ.I18n.getMessage("Click 'Yes' to have the name auto-corrected and continue, or 'No' to cancel and change the name.");
                        CQ.Ext.Msg.confirm(
                            CQ.I18n.getMessage('Invalid Name'),
                            msg,
                            function(btnId) {
                                if (btnId == 'yes') {
                                    CQ.wcm.SiteAdmin.internalCategoryFolder(selectedNode, label, title, vtype,description,EndofSupportLife,ProductIdentifier,CreatedDate);
                                    dialog.hide();
                                } else {
                                    dialog.getField("label").markInvalid(CQ.Ext.form.VTypes[vtype + "Text"]);
                                }
                            }
                        );
                    } else {
                        CQ.wcm.SiteAdmin.internalCategoryFolder(selectedNode, label, title, vtype,description,EndofSupportLife,ProductIdentifier,CreatedDate);
                        this.hide();
                    }
                }
            },
            "cancel":CQ.Dialog.CANCEL
                 }
    };
    var dialog = CQ.WCM.getDialog(createCategoryDialog);
    dialog.show();
};

[edubey · Accepted solution]

Okay...Create a similar listeners given in this file /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js at line 138 ( w.r.t AEM 5.6.1 )
The reference i have given is for the dialog where we create New page in siteadmin