Hi guys!
I am inserting input data into a database through code.
I need to make the inputs mandatory. Since currently when they click it is sent to the database without filling the input.
Anyone who can help me with this?
I attach my current code:
- Make these input elements required either via the editor or by code:
let inputs = [$w("#input1"), $w("#input2"),/*etc..*/];
inputs.forEach(e => e.required = true);
Then don’t insert unless all the inputs are valid:
let inputs = [$w("#input1"), $w("#input2"),/*etc..*/];
//..inside the sendButton.onClick event handler
if(inputs.every(e => e.valid)){
//wixData.insert() .....
} else {
//show "Fiil in the rest of the fields" message
}
The issue of presenting the mandatory fields is working well, the problem now is that you are sending the data even though the information is missing.
Please do NOT use IMAGES to show your CODE!
I don’t think that J.D. has enough time & inclination just for retyping all your code from Screenshot.
Please use the implemented CODE-BLOCKS.
Thks!
import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
let user = wixUsers . currentUser ;
$w . onReady ( function () {
if ( user . loggedIn ) { getUserDetails () }
})
async function getUserDetails () {
// Get the user email
let email = await user . getEmail (). then (( result ) => { return result })
// Now get the user full name
let name = await wixData . query ( ‘Members/PrivateMembersData’ )
. eq ( ‘_id’ , user . id ). find (). then (( result ) => {
return result . items [ 0 ]. name ;
})
// Set the fields’ values based on the data we have
$w ( ‘#input1’ ). value = name ;
$w ( ‘#input3’ ). value = email ;
}
export function sendButton_click ( event ) {
let inputs = [ $w ( “#input5” ), $w ( “#input6” ), $w ( “#input1” ), $w ( “#input3” ), $w ( “#dropdown1” ), $w ( “#country” )];
inputs . forEach ( e => e . required = true );
let toInsert = {
“nombre” : $w ( “#input1” ). value ,
“email” : $w ( “#input3” ). value ,
“inconveniente” : $w ( “#dropdown1” ). value ,
“anydeskId” : $w ( “#input5” ). value ,
“whatsApp” : $w ( “#input6” ). value ,
“tiempoDeSoporte” : $w ( “#country” ). value ,
“fecha” : $w ( “#fecha” ). value ,
“horaText” : $w ( “#dropdownHora” ). value ,
“estado” : $w ( “#input7” ). value ,
“comentario” : $w ( “#textBox1” ). value ,
“nuevoCampo” : $w ( “#uploadButton1” ). value ,
};
//…inside the sendButton.onClick event handler
if ( inputs . every ( e => e . valid )){
wixLocation . to ( “/thks-page” );
} else {
$w ( “#error” ). show ();
}
wixData . insert ( “soporte” , toInsert )
. then ( () => {
} )
. catch ( ( err ) => {
let errorMsg = err ;
$w ( "#error" ). show ();
} );
}
$w . onReady ( function () {
$w ( ‘#country’ ). onChange (() => {
if ( $w ( ‘#country’ ). value === ‘Programado’ ) {
$w ( ‘#fecha’ ). enable ();
$w ( ‘#dropdownHora’ ). enable ();
}
else {
$w ( '#fecha' ). disable ();
$w ( '#dropdownHora' ). disable ();
}
});
});
Better but still not in CODE-BLOCKS.
It should look like this one… clear and in CODE-BLOCKS.
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
let user = wixUsers.currentUser;
$w.onReady(function(){
if (user.loggedIn){getUserDetails()}
$w('#country').onChange(() => {
if ($w('#country').value === 'Programado') {
$w('#fecha').enable();
$w('#dropdownHora').enable();
}
else {
$w('#fecha').disable();
$w('#dropdownHora').disable();
}
});
});
async function getUserDetails() {
// Get the user email
let email = await user.getEmail().then((result)=>{return result})
// Now get the user full name
let name = await wixData.query('Members/PrivateMembersData')
.eq('_id', user.id)
.find()
.then((result) => {
return result.items[0].name;
});
// Set the fields' values based on the data we have
$w('#input1').value = name;
$w('#input3').value = email;
}
export function sendButton_click(){
let inputs = [$w("#input5"), $w("#input6"), $w("#input1"), $w("#input3"),
$w("#dropdown1"), $w("#country")];
inputs.forEach(e => e.required = true);
let toInsert = {
"nombre": $w("#input1").value,
"email": $w("#input3").value,
"inconveniente": $w("#dropdown1").value,
"anydeskId": $w("#input5").value,
"whatsApp": $w("#input6").value,
"tiempoDeSoporte": $w("#country").value,
"fecha": $w("#fecha").value,
"horaText": $w("#dropdownHora").value,
"estado": $w("#input7").value,
"comentario": $w("#textBox1").value,
"nuevoCampo": $w("#uploadButton1").value,
};
//..inside the sendButton.onClick event handler
if(inputs.every(e => e.valid)){
wixLocation.to("/thks-page");
}else {$w("#error").show();}
wixData.insert("soporte", toInsert)
.then(()=>{ })
.catch((err)=>{let errorMsg = err; console.log(errorMsg), $w("#error").show();});
}
Perhaps now you will get some answer from J.D.
@russian-dima Thanks for your help!
@info84338
Never use more than 1x —> $w . onReady ( function () in your code, if you do not want to get code-issues. I already cleaned it up a little bit. 
This seems not to be correct from your side…
if(inputs.every(e => e.valid)){
wixLocation.to("/thks-page");
}else {$w("#error").show();}
wixData.insert("soporte", toInsert)
.then(()=>{ })
.catch((err)=>{let errorMsg = err; console.log(errorMsg), $w("#error").show();});
}
J.D. gave you another suggestion. Read it one more time carefully…
- What should happen , if all your INPUTS are → VALID ?
- What should happen if just ONE of your INPUTS is NOT-VALID ?
Now take a look again at this part of your CODE… (what happens here???)
if(inputs.every(e => e.valid)){
wixLocation.to("/thks-page");
}else {$w("#error").show();}
wixData.insert("soporte", toInsert)
.then(()=>{ })
.catch((err)=>{let errorMsg = err; console.log(errorMsg), $w("#error").show();});
}
If all INPUTS are VALID → you want directly to REDIRECT to another page?
Without saving your INPUTS to your DB? (sure?)
And you want to write all INPUT-VALUES to DB, if just one of the INPUTS is NOT-VALID ?
@russian-dima Everything is working as it should, the only thing that is necessary is that if the fields are not validated, no information is sent.
@info84338 Please read my last post again! And again! And again and take a look onto your CODE here…
I need to make the inputs mandatory. Since currently when they click it is sent to the database without filling the input.
if(inputs.every(e=>e.valid)){
wixLocation.to("/thks-page");}
else {$w("#error").show();}
wixData.insert("soporte", toInsert)
.then(()=>{ })
.catch((err)=>{let errorMsg = err; console.log(errorMsg), $w("#error").show();});
}