Suppose that you have lighting-input field in your lighting component where you want to allow only number type input , well there are several ways to achieve this goal. You can write come complex JavaScript code and add validation on that input field , or there are many ways you will find.

Here in this blog we will see a simple and easiest way to restrict lightning-input field in lightning component , this solution can also be used with simple HTML input tag.

Solution :

Create lighting-input field with type=”number”

<lightning-input label="Enter Number" type="number" class="validateInput"></lightning-input>

now inside CSS file use className:invalid property , that will automatically handle input field based on type of input format .

Here I our case we are having class name as validateInput.

.validateInput :invalid { 
    background:colur:red;
}

and this is how simple it is to restrict input field in salesforce lighting component , notice that here we used input type=”number” if you do the same with email or tel type input then this trick can be applied their also.

Thank you…..