CODEWITHSUNDEEP
htmlcssjsp
develop1
develop1

Reputation: 767

Calling CSS style file from input tag

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

Answers (2)

develop1
develop1

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

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

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:

  1. Create a CSS class called .error and define it with {border-bottom: 2px solid red;}. Note that, px is always integer.
  2. Secondly, I will use AJAX to return any data for validating them.

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

Related Questions