ui:InputText/Date not working on Save

Question

I'm using ui:inputText and some other input field where the required attribute is set on "true", but it seems that it's not working as I expected to work.

I've a variable defined as an aura:attribute and it's not set to a default value, but when I leave empty all field with attribute required set to true, the record is saved anyway.

Someone has got more informations about "required" attribute? Or some examples of usage?

Thanks.

Answer 1

The ui:input* components don't provide validation so you'll need to create the logic on your own. For example:

<ui:inputNumber aura:id="amount" label="Amount"
                       class="slds-input"
                       labelClass="slds-form-element__label"
                       value="{!v.myAmount}" required="true"/>
<lightning:button label="Submit" 
                          onclick="{!c.submitForm}"/>
/** JS Controller **/
({
  submitForm : function(component, event, helper) {
    var myField = component.find("amount");
    var val = myField.get("v.value");
    if (isNaN(val)||val==''){
        myField.set("v.errors", [{message:"Enter an amount."}]);
    }
    else {
        myField.set("v.errors", null);
        //other stuffs here
    }
  }
})

If you're curious, the new lightning:input component not only provide Lightning Design System styling, but also provides the v.validity attribute to check field validity states. Notice that you can add an aura:id to the fields to group them together into an array. So you can do something like (example courtesy of @Eugene Kashida):

<lightning:input aura:id="field" label="First name" placeholder="First name" required="true" onchange="{! c.onChange }" />
<lightning:input aura:id="field" label="Last name" placeholder="Last name" required="true" onchange="{! c.onChange }" />
<lightning:button aura:id="submit" label="Submit" disabled="true" onclick="{! c.onClick }" />

({
  onChange: function (cmp, evt, helper) {
    var allValid = cmp.find('field').reduce(function (validSoFar, inputCmp) {
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true);
    cmp.find('submit').set('v.disabled', !allValid);
  },
  onClick: function (cmp, evt, helper) {
    evt.preventDefault();
    //other stuffs here
  }
})

You can learn more about lightning:input in the Lightning Components Developer Guide. Another difference between the ui:input* and lightning:input is that the latter doesn't support triggering of error messages programmatically (Spring '17). However, it does provide the ability to add custom error messages for common uses cases as you'll see in the Dev Guide.