Validating multiple select box

Question

Select box 1

<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select> 

Select box 2

<select name="slt_drop2" id = "slt_drop2">
<option value ="0">----------</option>
...........
</select> 

Select box 3

<select name="slt_drop3" id = "slt_drop3">
<option value ="0">----------</option>
...........
</select> 

Select box 4

<select name="slt_drop4" id = "slt_drop4">
<option value ="0">----------</option>
...........
</select> 

In a HTML form I've used 4 select buttons, if the user selects the value as "0" ie (Default value) in any of the select button it should show message near to the select button , "please select the correct value" for that particular for example if the value of slt_drop3 is "0" it should alert near slt_drop3 select option . The message should be displayed for individual button and not common alert .

Answer 1

maybe this is what you want ? Demo

$("select").change(function()
{
   if($(this).val() == "0")
       $(this).after(' <small> please select the correct value</Small>');
    else
        if($(this).next().prop("tagName").toLowerCase() == "small")
            $(this).next().remove();
});

$("select").trigger("change");

Answer 2

Do you use jQuery in your project? I think you can listen when you change the value of select and validate it:

$(function() {
    $('select').on('change', validate);

    function validate(e) {
      var select = $(e.currentTarget);
      var id = select.attr('id');
      var val = select.val();
      if (val === '0') {
        showMessage(id);
      } else {
        hideMessage(id);
      }
    }

    function showMessage(id) {
      $('.message[data-select-id="' + id + '"]').show();
    }

    function hideMessage(id) {
      $('.message[data-select-id="' + id + '"]').hide();
    }
});

Add blocks for messages near each select tag and show it if necessary

<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
<div class='message' data-select-id='slt_drop1'>please select the correct value</div>

Answer 3

1. Add a common class to each SELECT element.
2. Use jQuery to select that elements which match that class.
3. Bind a change event to the selector and apply the logic to check for "0" value

 $(document).ready(function() { $('select.is-valid').change(function() { var $el = $(this); if($el.val() == 0) { $el.after('<div>Select a different value</div>'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select> 

That's a basic example of what you're trying to achieve. Actual element/validation placement is up to you. I would recommend making a "Submit" button to check the validation but I assume you know how to do that.