Проверьте, являются ли одно или оба поля ввода пустыми, имеют 0 в качестве значения или отрицательное число

Question

У меня есть два поля ввода, которые выглядят следующим образом:

<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]?>">

Я не хочу, чтобы люди могли вводить значение 0, меньше 1 или ничего до продолжения.

Итак, в моем jquery есть следующее выражение if:

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

Все работает, кроме случаев, когда вы добавляете число, например 90 к первому входу и 0 ко второму, оно все еще продолжается. Почему это, как я могу это исправить?

Answer 1

Вы проверяли только первое значение класса .hoogtebreedte, поэтому второе значение не проверялось.

Ниже приведен рабочий пример:

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>

Кроме того, для нескольких классов вы можете использовать этот код:

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

Добавьте on('input') событие, чтобы проверять условие каждый раз, когда вы вводите число, и делаете функцию «универсальной» для работы с любым входом. Если введенное значение равно 0 или 1, введите красный цвет

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 3

Это происходит просто потому, что вы берете значение из class в jQuery, которое рассматривается как массив.

так что вы логически вы второй вход не получаете подтверждение.

each решит вашу проблему.

$('.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')
    }

})

Рабочий код здесь

Answer 4

<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 5

Вы должны проанализировать значение вашего ввода как целое число перед выполнением ваших проверок, так как значением элемента ввода всегда является строка.

Рабочий пример:

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>

Примечание: Я не проверяю значение, равное пустой строке, так как parseFloat вернет NaN (не число) длязначение, которое не может быть проанализировано как целое число и NaN> = 1, всегда ложно.