1

in my lightning component, I have one form in which fields are required but if I click on submit button record is getting saved. how can I check before submitting that all fields are filled or not?

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="RE_Customcaseregistration">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="options" type="List"></aura:attribute>
<aura:attribute name="SelectedValue" type="String"></aura:attribute>
<aura:attribute name="NewCase" type="Case"
                default="{ 'sobjectType': 'Case',
                         'Subject': '',
                         'Description' : '',
                         'Comments':'',
                         'email__c' : ''}"/>
<lightning:card title="" class="supportblock">
    <h1 class="slds-m-top_large slds-text-heading_medium">Customer Support</h1>
    <lightning:input aura:id="inputCmp" type="text" name="input1" label="Subject" required="true" value="{!v.NewCase.Subject}"/>
    <lightning:select class="select-auto-width" aura:id="SelectPropertyRcrd" name="select" label="Select a Property" required="true" value="{!v.SelectedValue}" onchange="{!c.UpdateSelectoption}"> 
        <option value="choose">Choose one...</option> 
        <aura:iteration items="{!v.options}" var="s">
            <option value="{!s.Id}">{!s.Name}</option>
        </aura:iteration>
    </lightning:select>
    <ui:inputTextArea aura:id="inputCmp" label="Description"   rows="5" value="{!v.NewCase.Description}"/>        
    <h1 class="slds-m-top_large slds-text-heading_medium">Additional Information</h1>
    <lightning:input  aura:id="inputCmp" type="text" name="input1" label="Additional comments" value="{!v.NewCase.Comments}" />
    <lightning:input aura:id="inputCmp" type="text" name="input1" label="Email"  required="true" value="{!v.NewCase.email__c}" />
    <lightning:button variant="brand" label="Submit" title="Submit" onclick="{!c.createAccount}"  />
</lightning:card>

createAccount : function(component, event) 
{
    console.log("called");
var newcase = component.get("v.NewCase");
  console.log("new case",component.get("v.NewCase"));
var action = component.get("c.CreateCase");
action.setParams({
    "cas": newcase
});
action.setCallback(this, function(a) {
       var state = a.getState();
        if (state === "SUCCESS") {
            var name = a.getReturnValue();
            alert("submitted");
        }
    });

$A.enqueueAction(action);

},

updated code

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="RE_Customcaseregistration">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="options" type="List"></aura:attribute>
<aura:attribute name="SelectedValue" type="String"></aura:attribute>
<aura:attribute name="NewCase" type="Case"
                default="{ 'sobjectType': 'Case',
                         'Subject': '',
                         'Description' : '',
                         'Comments':'',
                         'email__c' : ''}"/>
<lightning:card title="" class="supportblock">
    <h1 class="slds-m-top_large slds-text-heading_medium">Customer Support</h1>
    <lightning:input aura:id="inputCmp" type="text" name="input1" label="Subject" required="true" value="{!v.NewCase.Subject}" messageWhenValueMissing="Enter a value"/>
    <lightning:select class="select-auto-width" aura:id="SelectPropertyRcrd" name="select" label="Select a Property" required="true" value="{!v.SelectedValue}" onchange="{!c.UpdateSelectoption}"> 
        <option value="choose">Choose one...</option> 
        <aura:iteration items="{!v.options}" var="s">
            <option value="{!s.Id}">{!s.Name}</option>
        </aura:iteration>
    </lightning:select>
    <ui:inputTextArea aura:id="inputCmp" label="Description"   rows="5" value="{!v.NewCase.Description}"/>        
    <h1 class="slds-m-top_large slds-text-heading_medium">Additional Information</h1>
    <lightning:input  aura:id="inputCmp" type="text" name="input1" label="Additional comments" value="{!v.NewCase.Comments}" messageWhenValueMissing="Enter a value"/>
    <lightning:input aura:id="inputCmp" type="text" name="input1" label="Email"  required="true" value="{!v.NewCase.email__c}" messageWhenValueMissing="Enter value"/>
    <lightning:button variant="brand" label="Submit" title="Submit" onclick="{!c.createAccount}"  />
</lightning:card>

createAccount : function(component, event) 
{
    var allValid = component.find('inputCmp').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
        if (allValid) {
            //call your server side action here
            console.log("called");
var newcase = component.get("v.NewCase");
  console.log("new case",component.get("v.NewCase"));
var action = component.get("c.CreateCase");
action.setParams({
    "cas": newcase
});
action.setCallback(this, function(a) {
       var state = a.getState();
        if (state === "SUCCESS") {
            var name = a.getReturnValue();
            alert("submitted");
        }
    });

$A.enqueueAction(action);
        } 

},

  • Can you add the minimal required code of createAccount Controller? – sanket kumar Aug 8 '19 at 9:52
  • @sanketkumar, please check – garvita asthana Aug 8 '19 at 9:57
  • @sanketkumar error is coming because of reduce function – garvita asthana Aug 8 '19 at 10:04
  • replace the fieldId with what you have mentioned in aura:id for lightning:input and then try – sanket kumar Aug 8 '19 at 10:06
  • @sanketkumar can you please check updated code , now even i'm not able to submit a case – garvita asthana Aug 8 '19 at 10:46
1

As You have marked field as required in your component markup, below piece of code should check the validity.

update:- please change the field id to anything other inputCmp. i have kept it inputCmpId. Make change in your component markup as well.

    ({
    createAccount : function(component, event, helper) {
        var allValid = component.find('inputCmpId').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(allValid){
            //call your server side action here
            console.log("called");
            var newcase = component.get("v.NewCase");
              console.log("new case",component.get("v.NewCase"));
            var action = component.get("c.CreateCase");
            action.setParams({
                "cas": newcase
            });
            action.setCallback(this, function(a) {
                   var state = a.getState();
                    if (state === "SUCCESS") {
                        var name = a.getReturnValue();
                        alert("submitted");
                    }
                });

            $A.enqueueAction(action);
        }
    }
})

Read more about it here:- Input form in lightning component

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.