[SOLVED] Checking Form Field Validation

I’m setting up a form that’s linked to a database. Since I don’t want the submit button to save the user’s data if a particular input already exists in the database, I’ve set up custom code for the button. That’s all working perfectly.

But now, I’m realizing that the button will submit the form even if a particular form’s validation criteria is not met (ie, a required field can be left blank and the submit button will still function normally).

I’m not a programmer, so forgive my terminology here, but I assume the answer is to add to my “export function button3_click(event)” area, but to include checks for whether a field meets the assigned validation criteria prior to running the query and checking “#input8”.

Copy of the existing code:

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

export function button3_click ( event ) {
console . log ( “Button3 clicked” )

//Code for the button click goes here: 
//Run a query on the ReferralPartners collection. 
wixData . query ( "ReferralPartners" ) 
//Query the collection for any items whos "Referral Code" field contains 
//the value the user entered in the Referral Code box (input 8) 
. contains ( "referralCode" ,  $w ( '#input8' ). value )  
. find ()  //run the query 
. then ( res  => {  
    console . log ( "Ran the query for Referral Code" ) 
    **if**  ( res . length  >  0 ) { 
        //show error message - referral code already exists 
        console . log  ( "Referral code already exists." ) 
        wixWindow . openLightbox ( "Referral Code Not Available" ) 
    }  **else**  { 
        console . log ( "Hooray! You have a new referral partner coming!" ) 
        $w ( '#dataset1' ). save ()  //form submitted - action succeeded  
        wixLocation . to ( "/referral-partner-confirmation" ); 
        console . log ( "Save Done" )  
    }  
})  

}

I did find this, but really cannot figure out what to do with it:

When using a dataset, use the onItemValuesChange, and onBeforeSave to validate data before the save() is executed.

I was able to solve this on my own! Others may know of a more efficient way to do it, but here is the updated code.

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

let allFieldsValid = false

export function dataset1_itemValuesChanged ( ) {
let firstValid = $w ( “#input4” ). valid
let lastValid = $w ( “#input5” ). valid
let businessValid = $w ( “#input6” ). valid
let emailValid = $w ( “#input7” ). valid
let phoneValid = $w ( “#input8” ). valid
let codeValid = $w ( “#input9” ). valid
if ( firstValid && lastValid && businessValid && emailValid && phoneValid && codeValid ) {
allFieldsValid = true
} else {
allFieldsValid = false
}
}

export function button3_click ( event ) {
console . log ( “Button3 clicked” )

//Code for the button click goes here: 
//Run a query on the ReferralPartners collection. 
wixData . query ( "ReferralPartners" ) 
//Query the collection for any items whos "Referral Code" field contains the value the user entered in the Referral Code box (input 9) 
. contains ( "referralCode" ,  $w ( '#input9' ). value )  
. find ()  //run the query 
. then ( res  => {  
    console . log ( "Ran the query for Referral Code" ); 
    **if**  ( res . length  >  0  &&  $w ( '#input9' ). value . length  >  0 ) { 
        //show error message - referral code already exists 
        console . log  ( "Referral code already exists." ); 
        wixWindow . openLightbox ( "Referral Code Not Available" ) 
    }  **else**  { 
        **if**  ( allFieldsValid ) { 
            console . log ( "Hooray! You have a new referral partner coming!" ); 
            $w ( '#dataset1' ). save ()  //form submitted - action succeeded  
            wixLocation . to ( "/referral-partner-confirmation" ); 
            console . log ( "Save Done" ); 
        }  **else**  { 
            wixWindow . openLightbox ( "Submit Error" ) 
            console . log ( "Validation not met." ) 
        } 
    } 
}) 

}