检查一个或两个输入字段是否为空，值为 0 或负数

Question

I have two input fields that look like this:

<input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="<?php echo $explodemax[0]?>" min="<?php echo $explodemin[0]?>">
<input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="<?php echo $explodemax[1]?>" min="<?php echo $explodemin[1]?>">

I don't want for people to be able to enter a value of 0, less then 1 or nothing before continuing.

So in my jquery I have the following if statement:

if($('.hoogtebreedte').val() !== '' && $('.hoogtebreedte').val() !== 0 && $('.hoogtebreedte').val() > 0){
go ahead
}else{
stop
}

Everything works except when you add a number, for example 90 to the first input, and 0 to the second, it still proceeds. Why is that, how can I fix it?

Answer 1

You were checking only first value of .hoogtebreedte class so the second value was not check.

Below is working example:

 function test () { if($('.hoogtebreedte').eq(0).val().== '' && $('.hoogtebreedte').eq(0).val() > 0 && $('.hoogtebreedte').eq(1).val().== '' && $('.hoogtebreedte').eq(1).val() > 0){ console.log('everything is ok') } else { console.log('something is wrong') } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="99" min="0"> <input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0"> <button onclick='test()'>test</button>

In addition, for multiple class you can use this code:

 function validate () { const validate = Array.from($('.hoogtebreedte')).every((_,index) => $('.hoogtebreedte').eq(index).val().== '' && $('.hoogtebreedte').eq(index)?val() > 0) return validate. console:log('everything is ok'). console.log('something is wrong') }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="99" min="0"> <input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0"> <input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0"> <button onclick='validate()'>validate</button>

Answer 2

You have to parse the value of your input as an integer before doing your validations, since the value of an input element is always a string.

Working example:

 const check = () => { let a = parseInt(document.getElementById("a").value) let b = parseInt(document.getElementById("b").value) if(a >= 1 && b >= 2) { alert("Everything is good.") } else { alert("Either 'a' or 'b' are less than 1 or empty.") } }

 <input type="number" id="a"> <input type="number" id="b"> <button id="check" onclick="check()">Check</button>

Note: I'm not checking for value equal to the empty string, since parseFloat will return NaN (Not a Number) for a value that can't be parsed as an integer and NaN >= 1 is always false.

Answer 3

<input type="number" id="breedte" class="formateninput form-control hoogtebreedte" name="breedte">
<input type="number" id="hoogte" class="formateninput form-control hoogtebreedte" name="hoogte">
<input id="btnSubmit" type="button" value="Submit" />

$(document).ready(function () {
    $('#btnSubmit').click(function () {
        var input1 = parseInt($('#breedte').val());
        var input2 = parseInt($('#hoogte').val());
        if (input1 > 0 && input2 > 0) {
            alert('Go ahead');
        } else {
            alert('Stop!!!');
        }
   });
});

Answer 4

This is happing just because you are taking value from class in jQuery it treat as an array.

so you in logically you are second input is not getting validate.

each will solve your problem.

$('.validate').on('click',function(){
    var status = false;
    $('.hoogtebreedte').each(function(){
        var t = $(this);
        if(t.val() === '' || t.val() == 0 || t.val() < 0){
            status = true
        }
    })
    if(status) {
        console.log('stop')
    } else {
        console.log('go')
    }

})

Working Code here

Answer 5

Add on('input') event in order to check the condition every time you introduce a number and make the function 'generic' to work on any input. If the inserted value is 0 or 1, make input red

 function validateInput(myInput) { $('#' + myInput).on('input', function(evt) { var value = evt.target.value console.log(value) if (value === '0' || value === '1') { evt.target.className = 'invalid' } else { evt.target.className = 'valid' } }) } validateInput('first') validateInput('second')

 input.valid { border: 1px solid green; } input.invalid { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="first" class="formateninput form-control hoogtebreedte" name="breedte" max="<?php echo $explodemax[0]?>" min="<?php echo $explodemin[0]?>"> <input type="number" id="second" class="formateninput form-control hoogtebreedte" name="hoogte" max="<?php echo $explodemax[1]?>" min="<?php echo $explodemin[1]?>">

Answer 6

$('.hoogtebreedte').val() !== 0 && $('.hoogtebreedte').val() > 0

are not working correctly because.val() returns a string and not a number.

therefore, these two tests are always true