Checking the number in js

Question

I am beginner web developer I have problem with checking numbers in JS.

My code:

function checkValidateForm() {
        let errorWidth = false;
        let errorHeight = false;
        let errorDepth = false;
        if (parseFloat(cupboardMinWidth) <= parseFloat($('.product-size').val()) && parseFloat(cupboardMaxWidth) >= parseFloat($('.product-size').val())) {
            errorWidth = false;
        } else {
            errorWidth = true;
        }

        if (parseFloat(cupboardMinHeight) <= parseFloat($('.product-height').val()) && parseFloat(cupboardMaxHeight) >= parseFloat($('.product-height').val())) {
            errorHeight = false;
        } else {
            errorHeight = true;
        }

        if (parseFloat(cupboardMinDepth) <= parseFloat($('.product-depth').val()) && parseFloat(cupboardMaxDepth) >= parseFloat($('.product-depth').val())) {
            errorDepth = false;
        } else {
            errorDepth = true;
        }

        if ($('.product-size').val() == "" || $('.product-height').val() == "" || $('.product-depth').val() == "" || errorWidth === true || errorHeight === true || errorDepth === true) {
            $('.product-add-to-basket').attr("disabled", true);
            if (errorWidth === true) {
                $('.product-info-box1').html('Wymagana szerokość to: <b>' + cupboardMinWidth + 'cm -' + cupboardMaxWidth + 'cm </b><br/>');
                $('.product-info-box1').fadeIn("slow");
            } else {
                $('.product-info-box1').fadeOut("slow");
            }
            if (errorHeight === true) {
                $('.product-info-box2').html('Wymagana wysokość to: <b>' + cupboardMinHeight + 'cm -' + cupboardMaxHeight + 'cm </b><br/>');
                $('.product-info-box2').fadeIn("slow");
            } else {
                $('.product-info-box2').fadeOut("slow");
            }
            if (errorDepth === true) {
                $('.product-info-box3').html('Wymagana głębokość to: <b>' + cupboardMinDepth + 'cm -' + cupboardMaxDepth + 'cm </b><br/>');
                $('.product-info-box3').fadeIn("slow");
            } else {
                $('.product-info-box3').fadeOut("slow");
            }
            $('.product-info-error-msg').fadeIn("slow");
        } else {
            $('.product-info-error-msg').fadeOut("slow");
            $('.product-info-box1').hide;
            $('.product-info-box2').hide;
            $('.product-info-box3').hide;
            $('.product-add-to-basket').attr("disabled", false);
        }
    }

let productId = 1;

        let cupboardMinWidth = '100.00';


        let cupboardMaxWidth = '250.00';



        let cupboardMinHeight = '100.00';


        let cupboardMaxHeight = '190.00';



        let cupboardMinDepth = '140.00';


        let cupboardMaxDepth = '190.00';

My preview: http://serwer1356363.home.pl/_nauka/

Wymagana szerokość to: 100.00cm -250.00cm - max width

Wymagana wysokość to: 100.00cm -190.00cm -max height

Wymagana głębokość to: 140.00cm -190.00cm - max depth

When I add values to my inputs, e.g. 100.5, 120.5 etc. - the dimensions messages are not always hidden.

Why?

When my dimensions meet the ranges - the message should hide, and this is not always the case

How can I repair it?

your code works, is the execution that is wrong. Now you execute checkValidateForm on every input insertion and on page loading — Greedo
– Greedo, Commented Jul 27, 2020 at 12:25
Seems like you're using an input mask. So on input the mask hasn't "fix" the value so before the number becomes 100.5 (again, because of the mask code) it is 1005. — Mosh Feu
– Mosh Feu, Commented Jul 27, 2020 at 12:25
I add this values: 100.0. 120.0, 140.0 - and message is visible. When I add next integer to last input: 140.00 - then message is hidden. This is my problem — trifesk
– trifesk, Commented Jul 27, 2020 at 12:27
Instead of using the native events such as input, use the plugin callbacks e.g. onChange — Mosh Feu
– Mosh Feu, Commented Jul 27, 2020 at 12:34

khennouche faycal · Accepted Answer · 2020-08-24 11:54:32Z

2

When the $('.product-size') is empty it'll be parsed by parseFloat($('.product-size').val()) to NaN, and comparing any number with NaN with any operator will give you false, even comparing NaN with NaN will give you false.

What I suggest is to add events to the inputs, so when the user changes the value they'll be triggered and you can do the verification and show the messages as you want.

const size = document.querySelector('.product-size');

size.addEventListener('change', (event) => {
     console.log(event.target.value);
     // You can add the condition here and show your message
})

edited Aug 24, 2020 at 11:54

answered Jul 27, 2020 at 12:37

khennouche faycal

513 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checking the number in js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related