"Standard" Lightning Components - How is the Required attribute used?

Question

Most of the Lightning Components in the Lightning Component reference have a "Required" attribute as one of the options.

Example Component

Given that this appears to have no impact on validations out of the box, are there best practice guidelines on how to use this?

Andy

Answer 1

It is used to set the styling on the component and set the input to required. Browsers handle the required attribute in different ways but it does signify to the browser that that input must be filled out before submitting the document to the server

You can also roll your own validations on the fields using jQuery, JS, etc on all "input:required" fields using the attribute. Not much different from when you did it in VF

Answer 2

There ain't any bible related to Salesforce lightning as of yet, as this is still under user/client adaption. Salesforce is pushing Lightning to their customers. Here are few best practices currently available from the salesforce official docs (first two points).

1. Events Best Practices
2. Best Practices for Conditional Markup
3. if you are using jQuery, check this out.

I found this link quite useful while learning basics about lightning.

Edit

After going through few examples in lightning, lightning trailhead explains the required attribute in the following way

The <lightning:input> tag has its required attribute set to true. This illustrate only one meaning of required, which is “set the user interface of this element to indicate the field is required.” In other words, this is cosmetic only. There’s no protection for the quality of your data here.

So, if the required attribute is only cosmetic, when and how it is used. This attribute is useful when used in conjunction with your JS controller function.

var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
    // Displays error messages for invalid fields
    inputCmp.showHelpMessageIfInvalid();
    return validSoFar && inputCmp.get('v.validity').valid;
}, true);

The JavaScript reduce() method reduces the array to a single value that’s captured by validSoFar, which remains true until it finds an invalid field, changing validSoFar to false. An invalid field can be a required field that’s empty, a field that has a number lower than a specified minimum number, among many others.

The word “required” is nowhere to be seen in the above JS code, but that’s what the validation logic enforces. You must set a value for the expense name field.