+ Start a Discussion
Abhishek MallikAbhishek Mallik 

Getting error "The campingList JavaScript controller doesn't appear to be checking if form fields are valid."

Hi, while doing Aura input data using forms trail (https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_forms) challenge, I am getting following error:

   
The campingList JavaScript controller doesn't appear to be checking if form fields are valid.


My code is as follows:

campingList.cmp
<aura:component >
    
	<aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                               'Name': '',
                               'Packed__c': false,
                               'Quantity__c' : 0,
                               'Price__c' : 0}"/>
    <ol>

        <li>Bug Spray</li>

        <li>Bear Repellant</li>

        <li>Goat Food</li>

    </ol>

  <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newCampItemForm" class="slds-text-heading--small 
      slds-p-vertical--medium">
      Add Camping Item
    </legend>

    <form class="slds-form--stacked">

      <lightning:input aura:id="itemform" 
                       label="Name"
                       name="itemname"
                       value="{!v.newItem.Name}"
                       required="true"
      />

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Quantity"
                       name="quantityfield"
                       value="{!v.newItem.Quantity__c}"
                       min="1"
                       required="true"
       />

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Price"
                       name="price"
                       value="{!v.newItem.Price__c}"
                       formatter="currency"
                       step="0.1"
      />

      <lightning:input type="checkbox" 
                       aura:id="itemform" 
                       label="Packed?"
                       name="packed"
                       checked="{!v.newItem.Packed__c}"
      />

      <lightning:button label="Create Camping Item"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"
      />

    </form>

  </fieldset>
   <div class ="slds-card slds-p-top--meduim">
      <header class ="slds-card__header">
         <h3 class = "slds-text-heading--small">Items</h3>
       </header>

       <section class ="slds-card__body">
          <div id="list" class = "row">
            	<aura:iteration items="{!v.items}" var="campItem">
                    <c:campingListItem item="{!campItem}"/>
                </aura:iteration>
           </div>
        </section>

    </div>

</aura:component>

campingListItem.cmp
 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>        
    
    <p>Name: {!v.item.name}</p>
    <p>Price: <lightning:formattednumber value="{!v.item.Price__c}" 
                                         style="currency" 
                                         currencyCode="USD" />    </p>
    <p>Quantity:<lightning:formattednumber value="{!v.item.Quantity__c}" />
    </p>
    <p>
       <lightning:button label="Packed!" 
                           title="Packed"
                           value="{! v.item.Packed__c }"/>

    </p>
</aura:component>


and  campingListController.js
 
({
    clickCreateItem: function(component, event, helper) {

        // Simplistic error checking
        var validItem = true;

        // Name must not be blank
        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }

        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }


        if(validItem){            
            var newItem = JSON.parse(JSON.stringify(component.get("v.newItem")));
 
            console.log("Items before 'create': " + JSON.stringify(theItems));
		    theExpenses.push(newItem);
		    component.set("v.expenses", theItems);
		    console.log("Items after 'create': " + JSON.stringify(theItems));
            theItems.push(newItem);
            component.set("v.items", theItems);
        
        }
    }
})


In the above code though I am validating the inputs, getting no idea why still I am getting this error.
GauravendraGauravendra
Hi Abhishek,

I believe the error due to the aura id. 
When you are finding the element, you need to pass the aura id. Update the elements aura id same as name (you can remove the name too).
Let me know if that helps!
Abhishek MallikAbhishek Mallik
@Gauravendra, thanks for your response. Yeah I have updated the code as below:

campingList.cmp
<aura:component >

<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c"
                default="{'sobjectType' : 'Camping_Item__c',
                           'Name': '',
                           'Packed__c': false,
                           'Quantity__c' : 0,
                           'Price__c' : 0}"/>
<ol>

    <li>Bug Spray</li>

    <li>Bear Repellant</li>

    <li>Goat Food</li>

</ol>

<fieldset class="slds-box slds-theme--default slds-container--small">

<legend id="newCampItemForm" class="slds-text-heading--small 
  slds-p-vertical--medium">
  Add Camping Item
</legend>

<form class="slds-form--stacked">

  <lightning:input aura:id="itemname" 
                   label="Name"
                   name="itemname"
                   value="{!v.newItem.Name}"
                   required="true"
  />

  <lightning:input type="number" 
                   aura:id="quantity" 
                   label="Quantity"
                   name="quantityfield"
                   value="{!v.newItem.Quantity__c}"
                   min="1"
                   required="true"
   />

  <lightning:input type="number" 
                   aura:id="price" 
                   label="Price"
                   name="price"
                   value="{!v.newItem.Price__c}"
                   formatter="currency"
                   step="0.1"
  />

  <lightning:input type="checkbox" 
                   aura:id="itemform" 
                   label="Packed?"
                   name="packed"
                   checked="{!v.newItem.Packed__c}"
  />

  <lightning:button label="Create Camping Item"
                    variant="brand"
                    onclick="{!c.clickCreateItem}"
  />

</form>

 </fieldset>
 <div class ="slds-card slds-p-top--meduim">
  <header class ="slds-card__header">
     <h3 class = "slds-text-heading--small">Items</h3>
   </header>

   <section class ="slds-card__body">
      <div id="list" class = "row">
            <aura:iteration items="{!v.items}" var="campItem">
                <c:campingListItem item="{!campItem}"/>
            </aura:iteration>
       </div>
    </section>

</div>

</aura:component>

campingListItem.cmp

 
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>        

<p>Name: {!v.item.Name}</p>
<p>Price: <lightning:formattednumber value="{!v.item.Price__c}" 
                                     style="currency" 
                                     currencyCode="USD" />    </p>
<p>Quantity:<lightning:formattednumber value="{!v.item.Quantity__c}" />
</p>
<p>
   <lightning:input type="toggle"                           
                     label="Packed?"                          
                     name="packed"                        
                     checked="{!v.item.Packed__c}" 
   />
</p>

<div>
    <lightning:button label="Packed!" name='myButton' onclick="
     {!c.packItem}"/>
  </div>   

</aura:component>

campingListItemController.js is as below:
 
({packItem : function(component, event, helper) {
    component.set("v.item.Packed__c", "true");
    var btnClick = event.getSource();
    btnClick.set("v.disabled",true);
},
})

and campingListController.js is same as is. But still getting the same issue as before.