Question

我正在尝试创建一条错误消息以显示给用户，但它似乎不起作用。如果缺少用户输入，则错误消息应该向其中传入其他消息，然后在一个范围内显示所有错误（红色），每个错误在一行中。

        $(function() {
            $("#intButton").click(function() {
                var errorMsg = "";
                $errorMsg = $(errorMsg);
                $($errorMsg).css("color", "red");
                if (!$("#intMin").val()) $($errorMsg).append("<p>Enter a minimum value!</p>");
                if (!$("#intMax").val()) $($errorMsg).append("<p>Enter a maximum value!</p>");
                $("#intResult").text($($errorMsg).text());
            });
        });

HTML：

Min:<input type="text" id="intMin">
Max:<input type="text" id="intMax">
Result: <span id="intResult"></span>

这根本不显示任何错误，它根本不起作用。范围内没有显示任何内容。

http://jsfiddle.net/kWTkT/1/

Answer 1

更简单的方法是简单地创建一个CSS类error：

.error {
    color: red;
}

然后只需将该类添加到p上的append元素：

$("#intButton").click(function() {
    var errorMsg = "";
    if (!$("#intMin").val()) errorMsg += "Enter a minimum value. <br />";
    if (!$("#intMax").val()) errorMsg += "Enter a maximum value. ";

    //Display the error:
    $("#intResult").html("<p class='error'>" + errorMsg + "</p>");
});

Answer 2

检查你正在寻找这个

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body style="">
  Min:
<input type="text" id="intMin">
<br>
<br>Max:
<input type="text" id="intMax">
<br>
    <input type="button" value="click" id="intButton">
<br>Result: <span id="intResult"></span>
<script type="text/javascript">//<![CDATA[ 

        $(function() {
            $("#intButton").click(function() {
                var errorMsg = "";
                console.log('enter');
                $errorMsg = $(errorMsg);
                $($errorMsg).css("color", "red");
                if ($("#intMin").val()=='') $('#intResult').append("<p>Enter a minimum value!</p>");
                if ($("#intMax").val()=='') $('#intResult').append("<p>Enter a maximum value!</p>");

            });
        });
//]]>  

</script>
</body>
</html>

DEMO

Answer 3

如果您想将每条错误消息保存在单独的段落标记中，您可以执行以下操作：

CSS

.errorResults{ 
    color: red; 
}

HTML

Min: <input type="text" id="intMin" /><br />
Max: <input type="text" id="intMax" /><br />
Result: <span id="intResult" class="errorResults" ></span><br />
<button id="intButton">Test</button>

脚本

$(function () {
    $("#intButton").click(function () {
        var errorMsg = "";
        if (!$("#intMin").val()) {
            errorMsg += "<p>Enter a minimum value!</p>";
        }
        if (!$("#intMax").val()) {
            errorMsg += "<p>Enter a maximum value!</p>";
        }
        $("#intResult").html(errorMsg);
    });
});

JSFiddle Demo

创建错误消息

3 个答案: