проверка формы с диапазонами данных

Question

Я пытаюсь проверить форму HTML. проверьте поле с двумя другими полями относительного диапазона. Я хочу проверить все переменные isset и между диапазоном перед отправкой формы. Я попробовал этот метод, но не дал ожидаемого результата. Как я могу сделать это с помощью другого самого простого метода.

$("#form").submit(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
var apple = $('.apple').val();
var aFirst = $('.aFirst').val();
var aLast = $('.aLast').val();

var banana = $('.banana').val();
var bFirst = $('.bFirst').val();
var bLast = $('.bLast').val();

var orange = $('.orange').val();
var oFirst = $('.oFirst').val();
var oLast = $('.oLast').val();
if(apple >= aFirst && apple <= aLast){
    var a = 'true';
}else{
  var a = 'false';
}
if(banana >= bFirst && banana <= bLast){
    var b = 'true';
}else{
  var b = 'false';
}
if(orange >= oFirst && orange <= oLast){
    var o = 'true';
}else{
  var o = 'false';
}

if(a == 'true' && b == 'true' && o == 'true')
{
  alert('success');
  //do ajax
}else{
  alert('error');
 }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form">
   <div class="form-group col-md-12">
            <label>Apple Price:</label>
            <input type="number" class="apple" placeholder="Type between 15-25">
            <input type="hidden" class="aFirst" value="10">
            <input type="hidden" class="aLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Banana Price:</label>
            <input type="number" class="banana" placeholder="Type between 10-20">
            <input type="hidden" class="bFirst" value="10">
            <input type="hidden" class="bLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Orange Price:</label>
            <input type="number" class="orange" placeholder="Type between 10-20">
            <input type="hidden" class="oFirst" value="10">
            <input type="hidden" class="oLast" value="20">
    </div>
   <button type="submit" id="submit">Submit</button>
 </form>

Answer 1

Скрытые входные классы для яблок должны быть aFirst и aLast:

Обновление : Я исправил следующую строку:

<input type="hidden" class="aLast" value="25">

Обновление 2 : Работает при удалении фруктов. + Очистка.

$("#form").submit(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var apple = $('.apple').val();
        var aFirst = $('.aFirst').val();
        var aLast = $('.aLast').val();

        var banana = $('.banana').val();
        var bFirst = $('.bFirst').val();
        var bLast = $('.bLast').val();

        var orange = $('.orange').val();
        var oFirst = $('.oFirst').val();
        var oLast = $('.oLast').val();

        var a = true;
        var b = true;
        var o = true;

        if (apple == "" || apple < aFirst || apple > aLast) {
            a = false;
        }
        if (banana == "" || banana < bFirst || banana > bLast) {
            b = false;
        }
        if (orange == "" || orange < oFirst || orange > oLast) {
            o = false;
        }

        if (a && b && o) {
            alert('success');
            //do ajax
        } else {
            alert('error');
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form">
  <div class="form-group col-md-12">
            <label>Banana Price:</label>
            <input type="number" class="banana" placeholder="Type between 10-20">
            <input type="hidden" class="bFirst" value="10">
            <input type="hidden" class="bLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Orange Price:</label>
            <input type="number" class="orange" placeholder="Type between 10-20">
            <input type="hidden" class="oFirst" value="10">
            <input type="hidden" class="oLast" value="20">
    </div>
   <button type="submit" id="submit">Submit</button>
 </form>

Answer 2

Опечатка,

у вас есть имя класса qFirst и qLast в HTML и js вы написали .aFirst и .aLast.

Также преобразуйте все значения в Number.

Когда вы сделаете .val(), он вернет string. А сравнение строк может дать неожиданные результаты

$("#form").submit(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
var apple = Number($('.apple').val());
var aFirst = Number($('.aFirst').val());
var aLast = Number($('.aLast').val());

var banana = Number($('.banana').val());
var bFirst = Number($('.bFirst').val());
var bLast = Number($('.bLast').val());

var orange = Number($('.orange').val());
var oFirst = Number($('.oFirst').val());
var oLast = Number($('.oLast').val());
if(apple >= aFirst && apple <= aLast){
    var a = 'true';
}else{
  var a = 'false';
}
if(banana >= bFirst && banana <= bLast){
    var b = 'true';
}else{
  var b = 'false';
}
if(orange >= oFirst && orange <= oLast){
    var o = 'true';
}else{
  var o = 'false';
}

if(a == 'true' && b == 'true' && o == 'true')
{
  alert('success');
  //do ajax
}else{
  alert('error');
 }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form">
   <div class="form-group col-md-12">
            <label>Apple Price:</label>
            <input type="number" class="apple" placeholder="Type between 15-25">
            <input type="hidden" class="aFirst" value="10">
            <input type="hidden" class="aLast" value="25">
    </div>
  <div class="form-group col-md-12">
            <label>Banana Price:</label>
            <input type="number" class="banana" placeholder="Type between 10-20">
            <input type="hidden" class="bFirst" value="10">
            <input type="hidden" class="bLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Orange Price:</label>
            <input type="number" class="orange" placeholder="Type between 10-20">
            <input type="hidden" class="oFirst" value="10">
            <input type="hidden" class="oLast" value="20">
    </div>
   <button type="submit" id="submit">Submit</button>
 </form>