function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pritesh Khole 1Pritesh Khole 1 

Challenge Not yet complete... here's what's wrong: The campingList JavaScript controller doesn't appear to be checking if form fields are valid.

Component Code:

    <aura:component >
  <aura:attribute name="newItem" type="Camping_Item__c"

         default="{ 'sobjectType': 'Camping_Item__c',

                        'Name': '',

                        'Quantity__c': 0,

                        'Price__c': 0,

                        'Packed__c': false }"/>

         

        <aura:attribute name="items" type="Camping_Item__c[]"/>

         

        <ol>

        <li>Bug Spray</li>

        <li>Bear Repellant</li>

        <li>Goat Food</li>

        </ol>

         

        <!-- CREATE NEW ITEM FORM -->

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

    

          <div class="slds-form-element slds-is-required">

              <div class="slds-form-element__control">

                  <lightning:input aura:id="itemname" label="Name"

                      class="slds-input"

                      

                      value="{!v.newItem.Name}"

                      required="true"/>

              </div>

         </div>

    

         <div class="slds-form-element slds-is-required">

              <div class="slds-form-element__control">

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

    

              </div>

          </div>

    

          <div class="slds-form-element">

              <div class="slds-form-element__control">

                  <lightning:input type= "number" aura:id="price" label="Price"
                                   formatter="currency"

                      class="slds-input"

                     value="{!v.newItem.Price__c}" />

              </div>

          </div>
    

          <div class="slds-form-element">

              <lightning:input type = "checkbox" aura:id="itemform" label="Packed?"

                  class="slds-checkbox"

                  

                  checked="{!v.newItem.Packed__c}"/>

          </div>

    

          <div class="slds-form-element">

              <lightning:button label="Create Camping Item"

                  class="slds-button slds-button--brand"

                  onclick="{!c.clickCreateItem}"/>

          </div>

    

        </form>

        <!-- / CREATE NEW ITEM FORM -->

         

        

    

        <div class="slds-card slds-p-top--medium">

            <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="items">

                        <c:campingListItem item="{!item}"/>

                    </aura:iteration>

                </div>

            </section>

        </div>

    

    </aura:component>

Controller code:
({
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 = nameField.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 = component.get("v.newItem");
        console.log("Create item: " + JSON.stringify(newItem));
        //helper.createItem(component, newItem);
        //        var theItems = component.get("v.items");

    // Copy the expense to a new object
    // THIS IS A DISGUSTING, TEMPORARY HACK
    var newItem = JSON.parse(JSON.stringify(item));

    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);

    }
}

})


Requesting your help to let me know what is wrong with the code?
Pritesh Khole 1Pritesh Khole 1
Found the Answer, below is the updated controller code:

({
clickCreateItem: function(component, event, helper) {

    // Simplistic error checking
    //var validItem = true;

    // Name must not be blank
    var nameField = component.find("itemname").reduce(function (validSoFar, inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;

            }, true);
    
   

    // Quantity must not be blank
    var quantityField = component.find("quantity").reduce(function (validSoFar, inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;

            }, true);

    //var quantity = nameField.get("v.value");
   

    var priceField = component.find("price").reduce(function (validSoFar, inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;

            }, true);

    


    if(validItem){
        var newItem = component.get("v.newItem");
        console.log("Create item: " + JSON.stringify(newItem));
        //helper.createItem(component, newItem);
        //        var theItems = component.get("v.items");

    // Copy the expense to a new object
    // THIS IS A DISGUSTING, TEMPORARY HACK
    var newItem = JSON.parse(JSON.stringify(item));

    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);

    }
    component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});
}

})
Saket Ranjan 3Saket Ranjan 3
Thanks @Pritesh Khole1 .