Condition not working inside jquery required validator

Question

I have multiple dynamic dropdown i am validating it through jquery required validator. But issue is the dropdown is starting from 0 index so validation not working when Select is selected. I'm using the following code.

jQuery('form#add_form :input').each(function(){
    jQuery(this).rules('add', {
        required: function(element) {

            if(element.type=='select')  {
                if(jQuery(this).children('option:selected').val() == '0')
                {
                    return false;
                }
                else 
                {
                    return true;
                }
            } else 
            {
                return true;
            }
        } });

});

Form tag :

{{Form::open(array('','method' => 'post','class'=>'add-form','id'=>'add_form')) }}

 @foreach($parent_attrs as $pattr)
                                              <div class="col-md-6">
                                                <label>
                  {!! Form::select('product'.$pattr->id, $products, $pattr, ['class' => 'form-control']) !!} 
                                              </div>
                                              @endforeach

instead of `jQuery('form#add_form :input')` try `jQuery('form#add_form')` — PHP Ninja, Jan 14 '20 at 07:34
tried but it is not working but jQuery('form#add_form :input') is working and i have issues in if condition of required if 0 index is selected i want required error to be displayed — user3653474, Jan 14 '20 at 07:37
i have added code snippet because my form is too large to post — user3653474, Jan 14 '20 at 07:45
If your code is too large to post, then it is 100% your job to condense it down to something smaller that still demonstrates the issue. — Sparky, Jan 14 '20 at 18:14

PHP Ninja · Accepted Answer · 2020-01-14T09:02:56.587

Here is an snippet.

$('form#add_form').validate();
$('select').each(function () {
        $(this).rules('add',{
            required_select: true
        });
        
    });
 $.validator.addMethod('required_select', function(value, element) {
        return value > 0;
    }, 'Please choose a option');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="add_form" method="post" action="" >
  <select id="product_1" name="product_1">
  <option value="0">Select Product 1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
  <select id="product_2" name="product_2">
  <option value="0">Select Product 2</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
  <button type="submit" name="submit"> Submit </button>
</form>

Hope this will help :)

Thanks but my dropdown is starting from 0 so it is not working in my case that is why i want to use condition in required — user3653474, Jan 14 '20 at 08:00
Your answer contains two versions of the same plugin. The minified and un-minified. Only one or the other is needed. — Sparky, Jan 14 '20 at 23:48

Condition not working inside jquery required validator

1 Answers1