创建一条错误消息

-1

我试图创建一个错误消息来显示给用户，但它似乎不工作。如果缺少用户输入，错误消息应该会获得额外的消息，然后在一个范围内显示所有错误（红色），每行显示一行。创建一条错误消息

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

来源

2013-06-18 frrlod

您正在创建一个jQuery元素几次$（$ ERRORMSG）。 – NicoSantangelo

的用途var errorMsg =“”; $ errorMsg = $（errorMsg）; – jbduzan

你不在页面的某个地方使用一些HTML代码吗？你应该提供一个jsfiddle –

一个更容易的方法是简单地创建一个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>"); 
});

来源

2013-06-18 13:22:11 tymeJV

如果这两个字段都是空的，那么第二个错误会不会覆盖代码中的第一个错误，而不是同时显示两个？ – frrlod

它会的，OP可以把两个空头都检入，不应该太难。 – tymeJV

这可能是有问题的 - 我想创建一条错误消息并附加到它的原因是，一次可能有多个错误，并且可能存在更多类型的错误。 – frrlod

检查你是否在寻找这个

<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

来源

2013-06-18 13:34:38

如果你想保持一个单独的段落标记中每个错误信息，你可以这样做：

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

来源

2013-06-18 13:55:36 Brad

创建一条错误消息

回答

相关问题