To display a prompt notification (Lightning design system)

Question

The input field takes in a name and on the click of the 'submit' button, it saves this new account name. But if the input field is empty, then the program should display a prompt which says "error" I am entering the name and the name is getting saved in the account . but how do i check if the field is empty and if it is empty, how to display the prompt? This is my code:

Component :

      <aura:attribute name="newAccount" type="Account"
         default="{ 'sobjectType': 'Account',
                         'Name': '',
                       }"/>




    <div>
        <form>
              <ui:inputText aura:id="AccountName" label="New Account Name"
                        class="slds-input"
                        labelClass="slds-form-element__label"
                        value="{!v.newAccount.Name}"
                        required="true"/>
             <ui:button label="Submit" 
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.createAccount}"/>
    <div id="prompt">        
     <div role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal--prompt">
      <div class="slds-modal__container">
        <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
          <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
            <span class="slds-assistive-text">Close</span>
           </button>
          <h2 class="slds-text-heading--medium" id="prompt-heading-id">Error</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <p> Then input field cannot be empty </p>
        </div>
         <div class="slds-modal__footer slds-theme--default">
          <button class="slds-button slds-button--neutral">Okay</button>
          </div>
      </div>
    </div>
    </div>    
    <div class="slds-backdrop slds-backdrop--open"></div>
        </form>
        </div>
    </aura:component>

Javascript controller:

({
         createAccount : function(component, event) 
           {
               var newAcc = component.get("v.newAccount");
            var action = component.get("c.saveAccount");
            action.setParams(
                  { 
                "acc": newAcc
                  });
            action.setCallback(this, function(a)
               {
                  var state = a.getState();
                if (state === "SUCCESS") 
                   {
                       var name = a.getReturnValue();
                      alert("hello from here"+name);
                }
                        });
          $A.enqueueAction(action)
    }
    }) 

Apex controller(Server side):

public with sharing class promtserv
  {
@AuraEnabled
    public static Account saveAccount (Account acc) {

    upsert acc;
    return acc;
    }
  }

Also, should i include anything in the svg class? if yes what and how?

Answer 1

Inside your javascript controller you can check if the Name is blank or not. If its blank, you can show user an alert.

({
    createAccount : function(component, event) 
        {
            var newAcc = component.get("v.newAccount");
            var action = component.get("c.saveAccount");
            if(newAcc.Name){
                action.setParams(
                { 
                "acc": newAcc
                });
                action.setCallback(this, function(a)
                {
                var state = a.getState();
                if (state === "SUCCESS") 
                {
                var name = a.getReturnValue();
                alert("hello from here"+name);
                }
                });
                $A.enqueueAction(action);
            }else{
                alert("Name is Blank");
            }

        }
}) 

Answer 2

I think it taking whitespace as first so may be you can use JS trim or replace(/^\s+|\s+$/gm,'')

like e.g.

var someVar = component.get("v.testAttribute").replace(/^\s+|\s+$/gm,'');
   if($A.util.isEmpty(someVar)){
   show error;
   }
   else {
     proceed next steps
   }

Answer 3

What if you hide the Save button by default and enable it only of the user enters a valid value in the Name field? Something in lines of:

COMPONENT

<aura:attribute name="isValid" type="Boolean" default="false"/>

<lightning:input aura:id="AccountName" label="New Account Name" value="{!v.newAccount.Name}" placeholder="" required="true" onchange="{!c. isEntryValid}"/>

<aura:if isTrue="{!v.isValid}">            
         <ui:button label="Submit" 
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.createAccount}"/>
</aura:if>

CONTROLLERJS

isEntryValid: function (component, event, helper) {
        var elementAuraId = event.getSource().getLocalId();
        var str = component.find(elementAuraId).get("v.value");
        console.log('-------> elementAuraId = ' + elementAuraId);
        component.set("v.isValid", !helper.isEmpty(str));
    },

isEmpty: function(str){
            return !(str && str.trim() && str.length !== 0 && str.replace(/\s/g,"") != "");
        },

Of course, if there is going to be a value in the Name field upon load (i.e. edit mode), then you will have to set the isValid flag to true in the init event.

Answer 4

First of all, you are using ui:inputText. Salesforce recommends you use lightning:input instead as the components in 'ui' namespace will be deprecated eventually.

I am not sure if this happens for ui:inputText but when you change it to lightning:input, if a required field is not populated, it will change it's border to red to tell user that something's wrong with the input when user focuses out of the field.

Now, even if you do this it won't stop user from creating the account. So you have to validate it yourself in the createAccount() function in your JS controller

On the line after var newAcc = component.get("v.newAccount");, you can add validation like this:

var accountName = newAcc.Name;
if (!accountName || !accountName.trim()) {
   // Show toast
}

This code gets the name in a variable called as accountName and checks whether it is blank or not by trimming it and then you can handle it as you want.

Errors in lightning are displayed to user using toast. You can check out this blog Show Lightning Design System Toast Notification Using ShowToast In Lightning Component to understand how it can be done.

Don't forget to mark as Best Answer if this solutions works for you. :)