TransWikia.com

form validation with data ranges

Stack Overflow Asked by Eniol on August 7, 2020

I am trying to validate HTML form. check a field with two other relative range fields. I want to check all variables isset and between the range before submitting form.
I tried this method not giving the expected result.
How can I do it with other easiest method.

$("#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>
javascriptjquery

2 Answers

The hidden input classes for apples should be aFirst and aLast:

Update: I have corrected the following line:

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

Update 2: Works when fruit divs are removed. + Cleanup.

$("#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>

Correct answer by user1855085 on August 7, 2020

There is a typo,

you have a class name as qFirst and qLast in HTML and js you have written .aFirst and .aLast.

Also convert all values to Number.

When you do .val(), it returns string. And Comparing Strings can give unexpected results

$("#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>

Answered by Kenny on August 7, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP