How to put field validation on ui:inputtext in javascript using lightning component?

Question

How to put field validation on ui:inputtext in JavaScript using lightning component?

Below is my html code:

<ui:inputText 
      class="slds-form-element__control slds-input" 
      value="{!v.CustomerPo}" 
      aura:id="customer_po" 
      maxlength="35"/>

kindly reply

Answer 1

You can validate your input like the following way:

var inputCmp = component.find("customer_po");
var value    = inputCmp.get("v.value");

// Is input numeric?
if (isNaN(value))
     inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); // Set Error
else inputCmp.set("v.errors", null);                                       // Clear Error

Answer 2

The above answer it's ok using the isNaN() from JS, but you can do the following if you define a helper method that can be used in the same kind of inputs, from other components. So, also using utilities from the framework:

// HELPER
function : validateNumber (component, auraId){
    var value = component.find("auraId").get("v.value");
    return $A.util.isNumber(value);
}

// CONTROLLER
function : saveButton (component){

    if (!helper.validateNumber(component, 'customer_po')){
        component.set("v.errorMessage", 'Not a numeric value');
    } else {
        component.set("v.errorMessage", '');
    }
}