Display an error message in HTML using jQuery

Question

I am trying to display an error message using jQuery. It is not displaying when there is an error. I have taken this from another question and modified it.

The jQuery (contained in an if exception test which is triggered) is:

$("#projectIDSelect").html("Please select a Project ID").addClass("error-msg"); // chained methods

The html is:

<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
</p>

Also, after this has run the dropdown no longer contains the options (these have been dynamically loaded).

I feel like your problem lies in calling a .html(...) method on your <select> element which parses your string input and replaces the innerHTML. Instead, use .text(...) method described here. — John Doe
– John Doe, Commented Apr 30, 2019 at 4:34
Also, there's no sense to populate <select> tag with weird content (i.e., not <option>s). Add a separate container, like other people suggested here, specifically for displaying your status updates. — John Doe
– John Doe, Commented Apr 30, 2019 at 4:46

Naveed Ramzan · Accepted Answer · 2019-04-30 04:32:18Z

4

#projectIDSelect is a combo or drop down box. and in your jquery when you update content using .html it will not show error because its not possible to show html content in a drop down box.

You need to add separate identifier for showing message.

Your code could be:

<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
    <p id="projectIDSelectError"></p>
</p>

and your jquery could be:

$("#projectIDSelectError").html("Please select a Project ID").addClass("error-msg"); // chained methods

answered Apr 30, 2019 at 4:32

Naveed Ramzan

3,5893 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paaarth · Accepted Answer · 2019-04-30 10:32:17Z

$(function() {
    if (!$('#projectIDSelect option:selected').val()) {
        $("#divError").html("Please select a Project ID").addClass("error-msg"); // chained methods
    } else {
        $("#divError").html("").removeClass("error-msg");
    }
    $("#projectIDSelect").change(function() {
        if (!$('option:selected').val()) {
            $("#divError").html("Please select a Project ID").addClass("error-msg"); // chained methods
        } else {
            $("#divError").html("").removeClass("error-msg");
        }
    });
});

.error-msg {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
   <label for="projectIDSelect">Project ID<span class="required">*</span></label>
   <!--Place to load the Project Names into for selection -->
   <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
      <option value=""  selected>Select a Project</option>
      <option value="1" >123</option>
      <option value="2" >321</option>
   </select>
</p>
<div id='divError'></div>

Deepak A · Accepted Answer · 2019-04-30 04:40:22Z

0

You are selecting id in label instead of for selector ref jQuery selector for the label of a checkbox this helps

$("label[for='projectIDSelect']").html("Please select a Project ID").addClass("error-msg");

.error-msg
{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
</p>

answered Apr 30, 2019 at 4:40

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

Display an error message in HTML using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related