1

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> 
  • Use the Label Attribute on your ui:inputText tag to show that as a Required one. – am_Aravi Mar 9 '18 at 10:32
  • add required in inputText will just show asterisk, you need to check this on the controller. Have a look on this post salesforce.stackexchange.com/questions/181094/… – salesforce Developer Mar 9 '18 at 17:25
  • @salesforceDeveloper please add this as an answer as this is the solution which worked. Thanks – Thomas Mar 10 '18 at 8:33
0

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.');
        }
    }
})
1

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 &nbsp; like this <ui:inputText label="&nbsp;" it will show the asterisk.

  • When filling in the label I indeed see the aterisk but I am stil able to save the record without the validation that the field is required – Thomas Mar 9 '18 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.