[SOLVED] Validate data

Ask the community
,
1

Hello everyone :grin:

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:

  1. To validate if they are not empty, all of them must be filled

  2. To validate their “type” (if the input requests numbers, it won’t be saved if it is text)

  3. I want the inputs that were filled incorrectly or left empty to change to their Error Mode

  4. If there is any error, the code won’t save the information and an Error Message will appear

  5. 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 ); 
  });

}

2

Hi everyone, again

Little by little I found ways to achieve what I wanted.

What I achieved:

  1. To validate if the inputs are not empty, all of them must be filled

  2. To validate their “type” (if the input requests numbers, it won’t be saved if it is text)

  3. I want the inputs that were filled incorrectly or left empty to change to their Error Mode

  4. If there is any error, the code won’t save the information and an Error Message will appear

  5. If everything is OK, a Success message will appear, then it saves the information

  6. 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);
      });      

   }
   }
   }
   }
   
}