2

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

0

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

  • 1
    I'd respectfully disagree: Setting the required attribute on a component in VF did mark the HTML DOM element as required and prevented submission of the form. However, in Lightning, the only attribute added is "aura-required", but not the "required" attribute. Also it doesn't seem to prevent actions/events occurring in Lightning. Additionally, there is no impact on styling on the component. Therefore, I'd say the functional difference is quite large. – Bigears Oct 26 '16 at 15:30
  • @Bigears - Was only going by what the doc in your link says it creates. If that is not the case then either a doc bug or a sf bug. – Eric Oct 26 '16 at 15:32
0

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.

  • With respect, you don't appear to be answering my question relating to the "Required" attribute on Lightning tags. The links you've posted don't seem to be related to my question. – Bigears Nov 4 '16 at 11:23

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.