Kanchan186's avatar

how to set validation on dynamic dependent dropdown

when i select industry dropdown then shows validation to segment dropdown

view

 <form class="m-t-40" method="post" action="{{url('/')}}/brand" enctype="multipart/form-data" novalidate>
                                    {{csrf_field()}}

                                    <div class="form-group">
                                    <h5>Industry Name <span class="text-danger">*</span></h5>
                                        
                                        <div class="controls">
                                            
                                             <select class="form-control" name="industry_id" onchange="getSegment(this.value)" required data-validation-required-message="This field is required">
                                            
                                            <option>--Select Industry--</option>
                                            @foreach($industry as $br)
                                            <option value="{{$br->industry_id}}">{{$br->industry_name}}</option>
                                            @endforeach
                                        </select>

                                        </div>
                                       
                                    </div>
                                    

                                    

                                    <div class="form-group">
                                        <h5>Segment Name <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            
                                             <select class="form-control" name="segment_id" id="segment_id" required data-validation-required-message="This field is required">
                                                <option>--Select Segment--</option>
                                           
                                        </select>

                                        </div>
                                       
                                    </div>

                                      <div class="form-group">
                                        <h5>Brand Name <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            <input type="text" name="brand_name" id ="brand_name" class="form-control" required data-validation-required-message="This field is required"> </div>
                                       
                                    </div>
                                     <div class="form-group">
                                        <h5>Brand Logo <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            <input type="file" name="brand_logo" id ="brand_logo" class="form-control" required data-validation-required-message="This field is required"> </div>
                                       
                                    </div>
                                    
                                            <div class="text-xs-right">
                                                <button type="submit" class="btn btn-info">Submit</button>
                                                <button type="reset" class="btn btn-inverse">Cancel</button>
                                            </div>
                                </form>

script

<script type="text/javascript">


  function getSegment(industry)
    {
       if(industry) {
                $.ajax({
                    url: '{{url('/')}}/segment/ajax/'+industry,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                    console.log(data)
                        $('select[name="segment_id"]').empty();
                        $('select[name="segment_id"]').prepend('<option value="">--Select Segment--</option>');
                        $.each(data, function(key, value) {
                            $('select[name="segment_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });

                    }
                });
            } else{
                 $('select[name="segment_id"]').empty();
            }
    }
   
</script>
0 likes
2 replies
shing_shing's avatar

How about adding a "required" attribute to every dropdown?

piljac1's avatar

Is it possible to detail what you're trying to accomplish exactly. With the info you gave us, we could interpret it many ways. Are you asking if it is possible to validate a field based on an other on form submit ? Are you asking how is it possible to show an error in "real time" for Segment Name when an Industry Name is selected ? Please elaborate. Thanks !

Please or to participate in this conversation.