Calling CSS style file from input tag

Question

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.

Are you using some kind of client side reactive JS library? What's ${emailError }, etc.? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 5, 2016 at 14:30
that a parameter to from the server side (Java) I would do request.setAttribute("emailError", "error") . And this way ${emailError} will have a value and the style will be set for the input tag. — develop1
– develop1, Commented Jan 5, 2016 at 14:33

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-05 14:34:42Z

3

I am not sure about the JSP way of yours, to check the correctness of the code. What I would simply do is:

Create a CSS class called .error and define it with {border-bottom: 2px solid red;}. Note that, px is always integer.
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" />

answered Jan 5, 2016 at 14:34

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

develop1 Over a year ago

Thanks for your answer, your solution did not exactly work but I was able to take some ideas you gave me and come up with another solution.

Praveen Kumar Purushothaman Over a year ago

@develop1 Awesome... All the best. :)

develop1 · Accepted Answer · 2016-01-05 15:52:57Z

1

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>

edited Jan 5, 2016 at 15:52

answered Jan 5, 2016 at 15:25

develop1

7671 gold badge13 silver badges34 bronze badges

2 Comments

Praveen Kumar Purushothaman Over a year ago

This looks good. I am voting it up. :) I am still wondering, how would you remove the style, if the input is good?

develop1 Over a year ago

I created another javascript method which removed the style, I will add the code.

Collectives™ on Stack Overflow

Calling CSS style file from input tag

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related