How to check mandatory fields before submitting them to the database?

Hi All, i have repeater that can be duplicated by the user using “add_click” button
eventually, i loop through all of the repeater elements and submit them into database.
the issue which that way is that my submit button doesn’t check if the mandatory fields is filled it and also doesn’t alert the user for missing fields,
i’ll be glad to have some assistance with a way to do it,
Thanks!!

import wixData from 'wix-data';

$w.onReady(function () {

    $w("#addStep").onClick( () => {
        add_click()
    })

    $w("#removeStep").onClick( () => {
        remove_click()
    })

    $w("#submitButton").onClick( () => {
        $w("#repeater1").forEachItem( ($item, itemData, index) => {
             wixData.insert("StepsDataBase")
        })
    })
});

export function add_click(event) {
 let repeaterData = $w("#repeater1").data;
 let length = $w("#repeater1").data.length;
 let newId = Number(length + 1);
 let newlet = {
        _id: `item${newId}`
    };
    repeaterData.push(newlet);
    $w("#repeater1").data = repeaterData;
}

export async function remove_click(event) {
 let repeaterData = $w("#repeater1").data;
 await repeaterData.pop();
    $w("#repeater1").data = repeaterData;
}
1 Like

Hey ValorHeart!

First thing is that we have to clean up your insert code above. You’re missing the rest of insert’s required parameters, mentioned here .

For your scenario, we’re going to add a validity check manually, since it’s not triggering by default. What it will do is check whether that field is valid, and will scroll to it and highlight it if it isn’t. If it is ready for the database, it will go through with the insert.

$w("#submitButton").onClick(() => {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
 if (!$item("#mandatoryField").valid) { //It's not filled like it should be.
            $item("#mandatoryField").updateValidityIndication(); //Show the error
            $item("#mandatoryField").scrollTo() //Go to the error.
            return;
        } else { //All's good!
            wixData.insert("StepsDataBase", {'dbFieldKey':$item("#mandatoryField").value});
        }
    })
})

Hi Chris, Thanks a lot of the answer!! it looks wonderful!
If i understand correctly, $item ( “#mandatoryField” ) points to specific element id, So if i have couple of mandatory fields i need to make that check per element by duplicating the code?
and in general if i have also non-mandatory fields i need to do the same just without the validation check?

Thanks!

Right you are. So you can duplicate that line of code that does the check for each of the elements ( i.e. #mandatoryItem1 , #mandatoryItem2 etc.)

1 Like