display error when no option is selected from select box

Question

I am facing one problem, I want to show an error when the user has not selected any service from selectbox. I have two checkboxes of Nails and Hair, when user selects the Nails checkbox then, the user must have to select the service from the selectbox. If the user does not select the Hair checkbox then, the selectbox is not mandatory that is below Hair. If both are checked and then both below service must be selected with span serror message. Here is my html:-

enter code here
<div class="one-row">
<div class="div_img_part-2">
    <span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/48031.png">
    </span>
    <span class="text_part_class-2">
        <p class="custom-checkbox firstpart">
            <input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">
            <label for="0">Nails</label>
        </p>
    </span>
    <select id="checkSelect-0" name="service_type[Nails]" class="selectpicker" style="display: none;">
        <option value="">Select Service</option>
        <option value="Salon">Salon</option>
        <option value="Mobile beautician">Mobile beautician</option>
        <option value="Both">Both</option>
    </select>
    <div class="btn-group bootstrap-select">
        <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-0" title="Select Service"><span class="filter-option pull-left">Select Service</span>&nbsp;<span class="caret"></span></button>
        <div class="dropdown-menu open">
            <ul class="dropdown-menu inner selectpicker" role="menu">
                <li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="1"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            </ul>
        </div>
    </div>
    <span id="serviceError-0" style="color: rgb(169, 68, 66);">Please select service</span>
</div>
<div class="div_img_part-2">
    <span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/55643.png">
    </span>
    <span class="text_part_class-2">
        <p class="custom-checkbox firstpart">
            <input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">
            <label for="1">Hair</label>
        </p>
    </span>
    <select id="checkSelect-1" name="service_type[Hair]" class="selectpicker" style="display: none;">
        <option value="">Select Service</option>
        <option value="Salon">Salon</option>
        <option value="Mobile beautician">Mobile beautician</option>
        <option value="Both">Both</option>
    </select>
    <div class="btn-group bootstrap-select dropup">
        <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-1" title="Salon" aria-expanded="false"><span class="filter-option pull-left">Salon</span>&nbsp;<span class="caret"></span></button>
        <div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">
            <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">
                <li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
                <li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            </ul>
        </div>
    </div>
    <span id="serviceError-1" style="color:#A94442; display:none;">Please select service</span>
</div>

Image:-

Now you see that every category having own selectbox Here is my jquery code :-

$("#checkservice").on('click',function() { // click event on submit button
    var n = $( "input:checked" ).length; //
    if(n == 0) {
        alert("Please Select atleast One Service"); return false;
    }

    for (var i = 0; i <= 1; i++) {
        if ($('#'+i).is(":checked")) {
            if ($("#checkSelect-"+i).val() === "") {
                $("#serviceError-"+i).show();
                return false;
            }             
        }
    }
});

This jquery code works only for first checkbox when i select nails and not select any service it will show error but when i select hair checkbox its not showing error

Image:-

I am using laravel framework. Please help me

Answer 1

 function onSubmit() { var fields = $("input[name='list']").serializeArray(); if (fields.length == 0) { alert('nothing selected'); // cancel submit return false; } else { alert(fields.length + " items selected"); } } // register event on form, not submit button $('#subscribeForm').submit(onSubmit) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST" id="subscribeForm"> <fieldset id="cbgroup"> <div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div> <div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div> <div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div> </fieldset> <input name="submit" type="submit" value="submit"> </form>