Granite select option isn't working as expected

[joshuau50160339]

I'm creating a select list using granite/ui/components/foundation/form/select and using the emptyOption and required properties.   The emptyOption appears to work as expected, but the required option isn't enforcing something to be selected?  Also, could emptyText be used in conjunction with emptyOption to provide a default message, i.e. "select something"?

<type

    jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/foundation/form/select"

    fieldLabel="Type"

    name="./type"

    emptyOption="{Boolean}true"

    required="{Boolean}true">

    <items jcr:primaryType="nt:unstructured">

        <detail

            jcr:primaryType="nt:unstructured"

            key="test"

            text="Test"

            value="test"/>

        <landing

            jcr:primaryType="nt:unstructured"

            key="test2"

            text="Test"

            value="test2"/>

    </items>

</type>

[joshuau50160339]

Any thoughts?

[smacdonald2008]

Are you using a DataSource object to populate the drop-down?

Scott's Digital Community: Using Granite DataSource objects to populate Experience Manager 6.2 Touch...

[joshuau50160339]

No.  It's just two options.  I'd prefer to have a blank option, and then require at least one option is selected if possible.

[Nupur_Jain · Accepted solution]

Hi Josh,

I believe the functionality you want to achieve is not possible with just field values, you have to write the js validation code for this.

For this modify your select node structure as :

<type

    jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/foundation/form/select"

    fieldLabel="Type"

    name="./type"

  required="{Boolean}true">

    <items jcr:primaryType="nt:unstructured">

        <select

            jcr:primaryType="nt:unstructured"

            key="Select"

            disabled="{Boolean}true"

            text="Select"

            value=""/>

        <detail

            jcr:primaryType="nt:unstructured"

            key="test"

            text="Test"

            value="test"/>

        <landing

            jcr:primaryType="nt:unstructured"

            key="test2"

            text="Test"

            value="test2"/>

    </items>

</type>

Create a clientlibray with category as "cq.authoring.dialog" and write the following js code for validation on form submission:

(function (document, $, ns) {

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

       e.stopPropagation();

       e.preventDefault(); // stop default form submission

      var $myform = $(this).closest("form.foundation-form");

      var type = $myform.find("[name='./type']").val();    // the name of the select field given in node structure , in your case it is './type'

     if(!type){

          ns.ui.helpers.prompt({

               title: Granite.I18n.get("Error"),

               message: "Please Select Type",

               actions: [{

                    text: "CANCEL",

                    className: "coral-Button"

               }]

       });

     }

     else{

       $myform.submit();

     }

  });

})(document, Granite.$, Granite.author);

This way, you will be able to achieve your required functionality.

Hope this helps!

Nupur

[joshuau50160339]

Thanks Nupur!  Correct me if I'm wrong but based on your answer it seems the SELECT required attribute doesn't do anything unless you write custom validation?  I don't see any indication from the documentation that the steps you outlined are necessary based on reviewing the docs.

Select — Granite UI 1.0 documentation

[Nupur_Jain]

Josh, I have never seen required attribute working for SELECT.

Thanks,

Nupur