Validate lightning-input Tag using the checkValidity() and reportValidity() methods in LWC

-

checkValidity():

In Lightning Web Components (LWC), the lightning-input component provides the checkValidity() method, which you can use to check the validity of the input field. This method returns a boolean value indicating whether the input satisfies its validation constraints.

reportValidity():

In Lightning Web Components (LWC), the lightning-input component provides the reportValidity() method, which you can use to check the validity of the input field and display error messages if needed. This method is particularly useful when you want to show error messages associated with the input field to the user.

Please find the below example on how to use these 2 methods to Validate and Display error messages in LWC

Create a sample LWC component with 3 lightning-input tags.

HTML


javascript


Explanation:

Step 1: use this.template.querySelectorAll('lightning-input'); to select all the required

<lightning-Input> you want to validate, this will identify all <lightning-Input> which can be assigned to a const array.

Step 2: If you only want specific tags to be added, perform array.slice(0,2) to only have the <lightning-Input> tags that you want to validate.

Step 3: Iterate the array till the array.length and perform array[i].checkValidity() , this returns a Boolean value, true if valid.

Step 4: To add error messages beside the <lightning-Input> tags, you can simply add array[i].reportValidity() if array[i].checkValidity() returns false.


This is how it looks in the UI if we directly click on the Button with Wrong/Empty Input Data.


happy coding!




Comments

Post a Comment

Popular posts from this blog

What are Duplicate Rules and Matching Rules? How to Invoke Duplicate and Matching Rules in Salesforce without performing DML operations?

-
Image
  Definition: 1.        Duplicate rules are configurations that define the conditions under which a record is considered a duplicate. These rules are applied to standard and custom objects in Salesforce. 2.        Matching rules determine how Salesforce identifies duplicate records when new records are created or existing records are updated. They define which fields to compare and the criteria for matching. 3.        Duplicate rules use matching criteria to determine if a new or updated record matches existing records in the Salesforce organization. Matching criteria can include exact matching or more flexible fuzzy matching based on specific fields. Please note that we can only invoke these while performing DML operations like Insert or Update . Duplicate Rule: It’s Corresponding Matching Rule: The Standard Contact Matching Rule criteria:   Blocking or Alerting: Duplicate rul...
Read more

Apex Best Practices

-
Image
Apex Best Practices: 1. All constants should have uppercase names, with logical sections of the name separated by  underscores. 2. Always check the returned values from Database.delete(), Database.emptyRecycleBin(),                    Database.insert(), Database.undelete(), Database.update() and Database.upsert() calls. If a list is passed to any of these methods, the call will return an array[] of results; the apex code must check all the return values in the returned array of results.  3. Classes that contain methods or variables defined with the webService keyword must be declared as global. 4. Declare instance variable as private or protected. 5. Declare only one variable per line of code. 6. Define meaningful numbers using clearly named constants (static final). 7. Do not instantiate any object before you actually need them. Specifically outside a try-catch block. 8. Each method name should have meaningful names start...
Read more

LWC Best Practices

-
1. Use the Lightning Data Service or cache data whenever possible 2. Before making a call to the server, make sure there's no other option to obtain the data 3. Consider passing data between components using attributes, events, or methods rather than retrieving the same data in different components 4. If multiple components on a given page retrieve the same data, consider creating a service component that has no UI elements and can query data once so that it can pass data on to other components. 5. Only SELECT the fields you need. 6. Set a LIMIT on the query, don't return huge numbers of rows at once 7. Implement pagination when queries may have large result sets. 8. Don't preload data that the user may never need 9. Put the least accessed components in a secondary tab that the user may not click. 10. Don't make a call to the server to filter or sort data you already have at the client side. JavaScript Arrays have built-in functions to do things like sort, filter, and f...
Read more