Make a lightning ui:inputText Required

Question

I have the following field ui:inputText in my lightning component which I made required but this is not showing in my page. Am I missing something?

<div aura:id="lookupField" class="slds-show">
                    <span class="slds-icon_container  slds-combobox__input-entity-icon" title="record">
                        <lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="{!v.IconName}" size="x-small" alternativeText="icon" />
                        <span class="slds-assistive-text"></span>
                    </span>
                    <ui:inputText click="{!c.onfocus}" updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input leftPaddingClass" value="{!v.SearchKeyWord}" placeholder="Zoek.." required="true"/>
                </div> 

Answer 1

adding required in inputText will just show asterisk, it will not make the field mandatory, you need to check this on the controller.

Below is the example how you can do the same in controller, copied from link

Component:

 <aura:component>
            <aura:attribute name = "documentType" type="String"/>
            <aura:attribute name = "attachmentNameValue" type="String"/>
            <lightning:layoutItem class="slds-p-around--medium" size="6">
                <lightning:select aura:id="fieldId"
                                  required="true"
                                  name="attachmentType"
                                  label="Attachment Type"
                                  value="{!v.documentType}"                             >
                    <option value = "">select</option>          
                </lightning:select>
            </lightning:layoutItem>  
            <lightning:layoutItem class="slds-p-around--medium" size="6">
                <lightning:input aura:id="fieldId"
                                 required="true"
                                 label="File Name"
                                 name="filename"
                                 value="{!v.attachmentNameValue}"/>
            </lightning:layoutItem>    
            <lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
        </aura:component>

Controller:

({
    handleUploadAction : function(component, event, helper) {
        //helper.onSelectChange(component, event);
        var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
        if (allValid) {
            alert('All form entries look valid. Ready to submit!');
        } else {
            alert('Please update the invalid form entries and try again.');
        }
    }
})

Answer 2

If you check the ui:inputText documentation you will find that the following expresion

<ui:inputText label="Expense Name" value="My Expense" required="true"/>

will convert to html as below.

<div class="uiInput uiInputTextuiInput--default uiInput--input">
  <label class="uiLabel-left form-element__label uiLabel">
    <span>Expense Name</span>
    <span class="required">*</span>
  </label>
  <input required="required" class="input" type="text">
</div>

You can see, the framework converts the element two HTML elements one label and one input element. In the label, it puts an asterisk and adds the required attribute in the input element.

If you don't add the label attribute it will not create the HTML label element and will not show the asterisk.

If your requirement is not to put anything in the label you can simply put   like this <ui:inputText label="&nbsp;" it will show the asterisk.