Javascript does not check blank fields

Asked

Viewed 1,122 times

1

Good Night, I have a problem in my JS code, I ask him to check if the fields are empty, but when I run the function with the empty field he does not make the treatment, simply ignore the if`s, I already looked on the internet how to validate, but what I think are examples very similar to what I did

Follow the code in Js and below the HTML

function calculaBask(){

var numA = parseFloat(document.getElementById('a').value),
    numB = parseFloat(document.getElementById('b').value),
    numC = parseFloat(document.getElementById('c').value),
    delta = null,
    x1 = null, x2 = null;

/* TRATATIVAS */

//ver se nao esta vindo numeros nulos
if(numA == '' || numA == null){

    alert("Digite um numero valido para continuar.");
    return false;
}

if(numB == '' || numB == null){

    alert("Digite um numero valido para continuar.");
    return false;
}

if(numC == '' || numC == null){

    alert("Digite um numero valido para continuar.");
    return false;
}

//recebendo o valor de delta
delta = numB * numB - 4 * numA * numC;

//pegando a raiz de delta
raizDelta = Math.sqrt(delta);

//Calculando primeira raiz
x1 = (-numB + raizDelta) / 2 * numA ;

//calculando segunda raiz
x2 = (-numB - raizDelta) / 2 * numA;

document.getElementById('raiz1').value = x1;
document.getElementById('raiz2').value = x2;
document.getElementById('bd').value = delta;

}
<header class="container">

        <h1 style="text-align:center;">Calcule Baskhara</h1>

    </header>

    <section class="container box-space secao-input">

        <label>Digite A:
            <input id="a" type="text" placeholder="">
        </label>

        <label>Digite B:
            <input id="b" type="text" placeholder="">
        </label>

        <label>Digite C: 
            <input id="c" type="text" placeholder="">
        </label>

    </section>

    <div class="container box-space results">
        <label class="label-rs">Raiz 1:
            <input id="raiz1" type="text">
        </label>
        <label class="label-rs">Raiz 2:
            <input id="raiz2" type="text">
        </label>
        <label class="label-rs">Binomio discriminante:
            <input id="bd" type="text">
        </label>
        <button onclick="calculaBask()" id="botao">Calcular</button>
    </div>

    <script src="js/script.js"></script>

1 answer

3


When you use parseFloat() and the field is empty (which at first is what you are trying to verify), it returns the string NaN (not a number -- in Portuguese, is not a number). With that his if validates the variables because they are no longer empty.

If the field is empty or not a number, the code below will return NaN:

parseFloat(document.getElementById('a').value);

Solution: Change all conditions in ifs for isNaN():

if(!(numA) == '' || numA == null){

for

if(isNaN(numA)){

And so on and so forth. Click here if you want to know more about isNaN().

  • Thank you very much man, it worked!!!!

  • @Joãovizu Show! Important for us to mark in the reply. Abs!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.