# validation after data is imported through .csv in lighnting web componet form

I made a UI, where i am taking inputs inside loop. I have four columns. First column is Model number and second column is Part Number(read only). When they enter model number i am calling class and checking if Model Number is valid or not. And showing error if not valid through .setCustomValidity('NOT FOUND') else updating part number.

This is working fine, But i also have a button to upload records through .csv file. When i click upload, i hide old view and show new view(table) with uploaded records.

Now i need to add same validation when file is uploaded. //

handleFileUpload(event) {
this.fileUploadView = true;
// do file reading and update varaible..
this.uploadedFilesReports = result;
this.doValidation();
}
doValidation() {
let allInputs = this.template.querySelectorAll('.modelNumber');
// allInputs are coming empty here. I guess table is not rendered on UI yet.
allInputs.forEach(element => {
element.dispatchEvent(new Event('focusout', { 'bubbles': true }));
});
}
sumit(event) {
let allInputs = this.template.querySelectorAll('.modelNumber');

allInputs.forEach(element => {
element.dispatchEvent(new Event('focusout', { 'bubbles': true }));
});
// here allInputs are coming and calling focusout event.
// validation happens when focusout event is called. Because i already
// have apex method which checks model number is valid or not.

// but its not stooping after validation.. executing statements after
this too.
// I need to do this validation in doValidation or stop executing  when
validation fails in submit().
}


.modelNumber is class name for lighnting-input tag of "Model Number".

Please let me know if calling element.dispatchEvent(new Event('focusout', { 'bubbles': true })) is correct way to do this or not. And How can i achieve this? Is there any way i can check validation after file is loaded from csv? like oncomplete or something ?

Any help would be appreciated.

Thanks, Manohar

• It doesn't appear to be a good way of calling event for all the inputs. I woul could answer your query if you can show me the code or provide detailed view of what's you are doing and not working. – Shahroz Beig Aug 2 at 12:43
• Hi @ShahrozBeig thank you for commenting. So I basically have two main columns in my table. Model Number and Part Number. And i have two tables one for manually entering and one for CSV upload. – Manohar Aug 2 at 13:48

## 1 Answer

And I believe, on uploading through csv you are facing the issue. So, I think you should create a component which will be called on click of upload through csv button (as a modal). On that component, you should upload the csv and call the apex which will validate the csv and returns the data back to the component. From the modal component, fire an event with the returned data passed as the event parameter andhandle the same event on the component where you have table and populates the Model Number and part Number column(s).

• Hi @Shahroz i actually don't need to create another component or a model. I was hoping to implement this in a same component if possible. My problem is when i read file from csv and assign it to a variable, which variable is used in for-each. When i am setting variable and trying to access inputs for my validation. Inputs are coming empty. – Manohar Aug 6 at 8:55
• 'uploadCSV() { this.uploadDocumentView = true; let csvData = this.readCSV(); this.upoadedRecords = csvData; // validation : uploaded model number must match with part number let allModelNumInputs = this.template.querySelectorAll('.modelNumber'); //allModelNumInputs --> coming empty. allModelNumInputs.forEach(element => { }); } <template if:true={uploadDocumentView}> <template for:each={upoadedRecords} for:item='rec' for:index="index"> <lightning-input class="modelNumber" data-item={index} value={rec.Model_Numnber__c}></lightning-input> </template> </template>' – Manohar Aug 6 at 9:00