如何使用确定的类别隐藏或显示最近的跨度

Question

I'm trying to validate with min value some required fields. I have several inputs. How to make validation to show or hide .min_val for each input - something like closest('.min_val') .

I tried: $this('closest').('.min_value').css('display','none'); , but it's not working. In this case, if I've not filled all inputs, it's showing min_val messages. These messages should be shown for each input independent of the others. How to do that?

My code is:

 $(".orders-div :input").each(function () { var min = $(this).attr('data-min-val'); var value = $(this).val(); if(min !== undefined && min !== null && min !== false) { if(value < min) { $(this).addClass('error'); $(this).closest('label').addClass('red'); $('.min_value').css('display','block'); } } 

 <div class="span2"> <label for="quantity"> <?php echo __('Quantity'); ?> <span class="red">*</span> <span class="min_value red" style="display:none"><?php echo __('Required min value:'); ?> 1</span> </label> <input data-min-val='1' class="span12 required" type="text" name="quantity"> </div> 

Answer 1

You can use pure HTML for this:

<input type="number" name="quantity" min="1" max="5">

When the form is submitted the browser will check if the input is a number and if it is between 1 and 5. If not it will throw an error.

http://jsfiddle.net/ydowpz6r/

Answer 2

Because of the way the HTML is set up, you need to traverse the DOM to get to the .min_value span that you want.

Try this:

$(".orders-div :input").each(function () {
  var min = $(this).attr('data-min-val');
  var value = $(this).val();

  if(min !== undefined && min !== null && min !== false) {
    if(value < min) {
      $(this).addClass('error');
      $(this).closest('label').addClass('red').find('.min_value').css('display', 'block');
    }
  }

This will find the .min_value span that's contained within the closest label.