Hello everyone 😁
I'm using code for entering some data to a Database, it actually works well.
The problem here is that, no matter what the inputs have (for example, text instead of numbers) or if they are empty (all inputs are required), if you click the "save" button the code will save ALL automatically
All I want is to validate the data the user is entering, when the SaveButton is being clicked:
To validate if they are not empty, all of them must be filled
To validate their "type" (if the input requests numbers, it won't be saved if it is text)
I want the inputs that were filled incorrectly or left empty to change to their Error Mode
If there is any error, the code won't save the information and an Error Message will appear
If everything is OK, a Success message will appear, then it saves the information and, finally, all the inputs delete the info they have and the counter ($w('#text13')) refreshes (a loop, in a nutshell)
I just need your guide to know what (and where) I have to add in the code
import wixData from 'wix-data';
$w.onReady(function () {
wixData.query("Entradas")
.count()
.then ((result) => {
$w('#text13').text = result.toString()
})
});
export function button2_click(event) {
const cant = $w('#input2').value
const pre = $w('#input3').value
var precio = cant * pre
$w('#input4').value = precio.toString()
let folio = $w('#text13').text
let escuela = $w('#dropdown1').value
let dulce = $w('#dropdown2').value
let fecha = $w('#datePicker1').value
let cantidad = $w('#input2').value
let inversion = $w('#input4').value
let s = "+"
let si = "-"
let toInsert = {
"title": folio,
"escuela": escuela,
"dulce": dulce,
"fecha": fecha,
"s": s,
"cantidad": cantidad,
"si": si,
"inver": inversion
};
wixData.insert("Entradas", toInsert)
.then((results) => {
console.log(results);
})
.catch((err) => {
console.log(err);
});
}
Hi everyone, again Little by little I found ways to achieve what I wanted.
What I achieved:
To validate if the inputs are not empty, all of them must be filled
To validate their "type" (if the input requests numbers, it won't be saved if it is text)
I want the inputs that were filled incorrectly or left empty to change to their Error Mode
If there is any error, the code won't save the information and an Error Message will appear
If everything is OK, a Success message will appear, then it saves the information
Finally, after the success message, all the inputs delete the info they have and the counter ($w('#text13')) refreshes (a loop, in a nutshell)
PLEASE, IF YOU WANT TO ACHIEVE THIS TOO (BUT DON'T GET MY CODE) COMMENT THIS AND I'LL TELL WHAT I DID
So, here it is my final code:
import wixData from 'wix-data'; $w('#dropdown2').required; $w('#dropdown1').required; $w('#input2').required; $w("#input2").inputType = "number"; $w('#datePicker1').required; $w("#input2").onKeyPress(event => { setTimeout(() => {validateInput();}, 10) }) function validateInput(){ let value = $w("#input2").value; if (/[a-z]/.test(value.toLowerCase())){ $w("#input2").value = ""; } } $w.onReady(function () { wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) }); export function dropdown2_change(event) { $w('#dropdown2').style.backgroundColor = "#BCC8D9"; wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) } export function dropdown1_change(event) { $w('#dropdown1').style.backgroundColor = "#BCC8D9"; wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) } export function input2_change(event) { $w('#input2').style.backgroundColor = "#BCC8D9"; wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) } export function datePicker1_change(event) { wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) } export function button2_click(event) { $w("#input2").onKeyPress(event => { setTimeout(() => {validateInput();}, 10) }) function validateInput(){ let value = $w("#input2").value; if (/[a-z]/.test(value.toLowerCase())){ $w("#input2").value = ""; } } $w('#dropdown2').required; $w('#dropdown1').required; $w('#input2').required; $w('#datePicker1').required; if ($w('#dropdown2').value === ""){ $w('#Error').show(); $w('#message').hide(); $w('#dropdown2').style.backgroundColor = "#C23B22"; console.error(); } if ($w('#dropdown1').value === ""){ $w('#Error').show(); $w('#message').hide(); $w('#dropdown1').style.backgroundColor = "#C23B22"; console.error(); } if ($w('#input2').value === ""){ $w('#Error').show(); $w('#message').hide(); $w('#input2').style.backgroundColor = "#C23B22"; console.error(); } if ($w('#input2').value === "text"){ $w('#Error').show(); $w('#message').hide(); $w('#input2').style.backgroundColor = "#C23B22"; console.error(); } if ($w('#datePicker1').value === null){ $w('#Error').show(); $w('#message').hide(); console.error(); } if ($w('#dropdown2').valid) { if ($w('#dropdown1').valid) { if ($w('#input2').valid) { if ($w('#datePicker1').valid) { $w('#message').show(); $w('#Error').hide(); const cant = $w('#input2').value const pre = $w('#input3').value var precio = cant * pre let x = parseFloat(precio).toFixed(2); $w('#input4').value = x.toString() let folio = $w('#folio').text let escuela = $w('#dropdown1').value let dulce = $w('#dropdown2').value let fecha = $w('#datePicker1').value let cantidad = Number($w('#input2').value) let inversion = Number(x) let s = "+" let si = "-$" let toInsert = { "title": folio, "escuela": escuela, "dulce": dulce, "fecha": fecha, "s": s, "cantidad": Number(cantidad), "si": si, "inver": Number(inversion) }; wixData.insert("Entradas", toInsert) .then((results) => { console.log(results); }) $w('#dropdown2').value = ""; $w('#dropdown1').value = ""; $w('#input2').value = ""; $w('#datePicker1').value = null; $w('#dropdown2').resetValidityIndication(); $w('#dropdown1').resetValidityIndication(); $w('#input2').resetValidityIndication(); $w('#datePicker1').resetValidityIndication(); wixData.query("Entradas") .count() .then ((result) => { $w('#folio').text = result.toString() }) .catch((err) => { console.log(err); }); } } } } }