Reputation: 767
I am creating a form on the client side there is a JSP page and on the server side I am using Java servlets to process the data. What I am trying to do is that if there is an error I want to be able to pass an error message which will cause the input get a red line under it to indicate an error. My code below works perfectly:
<input type="email" name="email" id="email" value="${param.email}" class="validate" <c:if test="${ not empty emailError}">style="border-bottom: 2.5px solid red; "</c:if>>
<label for="email" data-error="${emailError }" data-success="">Email</label>
What I want to know is, is there a way to remove style="border-bottom: 2.5px solid red; "
and replace it with a css file. The reason I want to do this is because I will have hundreds of lines of code with that specific style, if I ever wanted to change the style to something else I would need to go through every page and replace everything line by line. So can I store this style in a separate file and just call on that file to create the same effect? I am doing this for easy maintenance.
I also want to note that I can't just add this to the style sheet because then all the inputs will have a red line under them, I only want a input to show a red line if there is an error with that specific input.
Upvotes: 3
Views: 84
Reputation: 767
Praveen Kumar had a really good idea of creating a .error
class. what I ended up doing was:
<input type="email" name="email" id="email" value="${param.email}" class="validate" onclick="inputClicked('email')">
<label for="email" data-error="${emailError }" data-success="">Email</label>
<c:if test="${ not empty emailError}">
<script type="text/javascript">
javascript:error('email');
</script></c:if>
And the Javascript error(...) method :
<script>
window.error = function(name) {
document.getElementById(name).style.borderBottom = "solid red";
}
</script>
To remove the style:
<script>
function inputClicked(name){
$("#"+name).removeAttr("style")
};
</script>
Upvotes: 1
Reputation: 167250
I am not sure about the JSP way of yours, to check the correctness of the code. What I would simply do is:
.error
and define it with {border-bottom: 2px solid red;}
. Note that, px
is always integer.Note: ps: Sorry I am using jQuery library, which is awesome, and you haven't said that in your OP.
Let me show you a simple way to do this:
$(function () {
$("#numcheck").keyup(function () {
$this = $(this);
$.post("/path/to/check.jsp", function (res) {
if (res != "OK")
$this.addClass("error");
else
$this.removeClass("error");
});
});
});
* {font-family: 'Segoe UI';}
.error {border-bottom: 2px solid red;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="numcheck" />
Upvotes: 3