2013-06-18 2 views
-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/

+0

Вы создаете элемент JQuery несколько раз с $ ($ ErrorMsg). – NicoSantangelo

+0

Какова цель var errorMsg = ""; $ errorMsg = $ (errorMsg); – jbduzan

+0

Разве вы не используете какой-то код HTML где-то на своей странице? Вы должны предоставить jsfiddle –

ответ

4

Намного проще всего было бы просто создать 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>"); 
}); 
+0

Если оба поля пустые, не будет ли вторая ошибка перезаписывать первую в коде, а не показывать оба? – frrlod

+0

Это будет, OP может бросить чек для обоих пустых, не должно быть слишком сложно. – tymeJV

+0

Это может быть проблематично - причина, по которой я хотел создать сообщение об ошибке и добавить к ней, состоит в том, что одновременно может быть более двух ошибок, и существует больше типов возможных ошибок. – frrlod

0

чек оставьте свой поиск

<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

0

Если вы хотите, чтобы каждое сообщение об ошибке в пределах отдельного тега абзаца вы могли бы сделать что-то вроде:

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> 

Script

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

Смежные вопросы