How to check if a field is empty in GUI?

X

Xacker_Name2021-12-26 12:28:17

Python

Xacker_Name, 2021-12-26 12:28:17

There is an interface script:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,
  initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="eel.js"></script>
</head>
<body>

  <div class="box">
    <form action="#">
      <input type="text" id='chislo1' placeholder="Число">
      <input type="text2" id="chislo2" placeholder="Число">
      <input type="submit" id="btn" value="Сгенерировать число">
    </form>
  </div>
  <script>
    let btn = document.querySelector('#btn')
    btn.addEventListener('click', sendData);
    
    async function sendData() {
      let chislo1 = document.querySelector('#chislo1').value;
      let chislo2 = document.querySelector('#chislo2').value;

      await eel.rek_data(chislo1, chislo2)
    }



    </script>
</body>
</html>

And there is a generation script:

import eel
import random

eel.init('web')


@eel.expose
def rek_data(chislo1, chislo2):
  a = random.randint(int(chislo1), int(chislo2))
  print(a)



eel.start('index.html', size=(500,500))

Moreover, if there are empty fields in the interface, then there will be an error, how can I check if the fields are empty or not?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

soremix, 2021-12-26
@rt2233

The fields should not just be empty, but contain numbers. I would do like this:

async function sendData() {
  let chislo1 = parseInt(document.querySelector('#chislo1').value);
  let chislo2 = parseInt(document.querySelector('#chislo2').value);

  if (!isNaN(chislo1) && !isNaN(chislo2)) {
    await eel.rek_data(chislo1, chislo2);
  } else { console.log('not int'); }
}

A

Anton Shamanov, 2021-12-26
@SilenceOfWinter

In CSS/JS you can check for the presence of the :empty pseudo-class

input:empty {
     border: 1px solid red;
}

In addition, you can specify the required attribute for input/textarea/select
If you want to validate the entire form, then trigger the submit event on the form