文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery在HTML中显示错误消息

问使用jQuery在HTML中显示错误消息
EN

Stack Overflow用户

提问于 2019-04-30 12:27:56

回答 3查看 4.8K关注 0票数 1

我正在尝试使用jQuery显示错误消息。出现错误时不显示。我从另一个问题中提取了这个，并对其进行了修改。

jQuery (包含在触发的if异常测试中)为：

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

html为：

<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>

此外，运行此命令后，下拉菜单不再包含选项(这些选项已动态加载)。

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-04-30 12:32:18

#projectIDSelect是一个组合框或下拉框。在你的jquery中，当你使用.html更新内容时，它不会显示错误，因为它不可能在下拉框中显示html内容。

您需要添加单独的标识符来显示消息。

你的代码可以是：

<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>

你的jquery可以是：

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

票数 4

Stack Overflow用户

发布于 2019-04-30 12:36:19

$(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>

票数 0

Stack Overflow用户

发布于 2019-04-30 12:40:23

您选择的是id in label而不是for选择器ref jQuery selector for the label of a checkbox这很有帮助

$("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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55913980

复制

相似问题

问使用jQuery在HTML中显示错误消息
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在HTML中显示错误消息EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在HTML中显示错误消息
EN