Question

Here is my problem,

I have a select box where i need to validate if the val() becomes 0, then append a text insed a span with class error stating that ‘Please select a value’. Else need to remove that div. These happens when i click the submit button. Here is my code,

if ($('.combo option:selected[value==0]')) {
    var error_span = $("div.info-cont ul.map-list li span.right")
        .append("<br>Please select an appropriate value")
        .addClass('error');
} else {

}

Now the problem is, if a value is selected in the selectbox, my appended span should get removed. Any help. Thanks in advance…

Answer 1

I just want to explain this:

if ($('.combo option:selected[value==0]'))

To check if the selected item from dropdown has value 0, you can use the following:

if ($('.combo').val() == '0') // simpler and more readable :-)

Then, it will be simpler if you already put the error message somewhere in the document. All you need to do is show/hide it. For example:

<select id="dropdown-1" class="combo">
  <option value="0">-</option>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
</select>

<span id="error-dropdown-1" class="error" style="display: none">Please select a value!</span> <!-- hidden by default. can also use CSS instead of style="display: none" -->

<input type="button" id="demo-button" value="Demo" />

And the javascript (+ jquery):

$('#demo-button').click(function() {
  if ($('.combo').val() == '0') {
    $('#error-dropdown-1').show();
  } else {
    $('#error-dropdown-1').hide();
  }
});

Here is another example. Useful if you avoid IDs (perhaps you have dynamically generated dorpdowns):

<script type="text/javascript">
$(function() {
    $('#demo-button').click(function() {
        $('.combo').each(function() {
            var div = $(this).parents('div').get(0); // get the wrapper
            if ($(this).val() == '0') {
                $(div).find('.error').show(); // show <span class=".error"> inside the wrapper
            } else {
                $(div).find('.error').hide(); // hide <span class=".error"> inside the wrapper
            }
        });
    });
});
</script>

<div> <!-- wrapper for 1st combo + 1st error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Lorem</option>
        <option value="2">Ipsum</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<div> <!-- wrapper for 2nd combo + 2nd error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Dolor</option>
        <option value="2">Sit</option>
        <option value="3">Amet</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<div> <!-- wrapper for 3rd combo + 3rd error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Consectetuer</option>
        <option value="2">Adipiscing</option>
        <option value="3">Elit</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<input type="button" id="demo-button" value="Demo" />