I am currently working with JSP, Java servlets.
I am adding custom error messages for a form, I am following the example found on this site http://materializecss.com/forms.html under 'Custom Error or Success Messages'. What I want to do is once the user submits information it gets processed through a java servlet, if the Java servlet find an error with the users input, I want to enable the red error line that appears when an invalid input is entered.
The code I currently have is
<input type="email" name="email" id="email" value="${param.email}" class="validate">
<label for="email" data-error="Invalid Email" data-success="">Email</label>
Each email address has to be unique, so if the email entered is a valid email address then the user would submit the form, and when processing through the java servlet it would find that the email was already used and it will cause the <label> in the jsp page to turn red once the page reloads.
The solution to the question is that on the server side (java servlet) I would pass data into an argument
request.setAttribute("emailError", "error with email");
and on the client side (JSP) I did:
<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="Invalid Email" data-success="">Email</label>
And if you wanted to also display the message from the Java servlet you could add
title="${emailError}"
to the input tag. This would create an additional message box to display the error message.
With this code, if a error is found on the server side, a message would be set and once the JSP page reloads the input line would be red indicating that an error happened.
Related
Trying to add text with a style on error validation in a bootstrap form
This is part of the form:
<label th:text="#{name}"
class="col-form-label col-form-label-sm"></label>
<input
type="text" class="form-control form-control-sm"
th:field="*{name}" />
<span
th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="invalid-feedback">Here there is an error</span>
I get the message on validation error, but without styles.
If I debug I see the class with the style:
<span class="invalid-feedback">Here there is an error</span>
I have tried with severals styles like help-block but no way.
I'm using bootstrap4.0.0-alpha.6
Any idea?
Thanks
In case you are still interested.
Bootstrap's current validation docs give you three approaches: client-side custom validation, browser defaults and server-side validation.
From your post I will assume you're using server side, meaning that you are sending the data to be validated in your server code for then showing the error fields when the form is re-rendered.
In that case, remember that for bootstrap's styles to kick in, a certain html structure is expected from your code, example:
<input th:field ="*{email}" type="email" class="form-control"
th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"
required>
<div class="invalid-feedback">
<p th:each="error: ${#fields.errors('email')}" th:text="${error}">Invalid data</p>
</div>
(I believe a span tag will work too for <div class="invalid-feedback">)
That is a minimal necessary structure for the error styles to work. What happens:
Initially, invalid-feedback is assigned display: none
The form is submitted, if it has an error it'll be re-rendered and it's up to the developer to provide a mechanism which will include is-invalid in the class attribute of every <input class="form-control"/> with an error. In the previous code, th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid" is responsible for that to happen. (I'm new to Spring and Thymeleaf, so there could be a neater code for this)
Declaration .form-control.is-invalid~.invalid-feedback in _forms.scss will kick in and assign display: block to <div class="invalid-feedback">, thus showing each field's error message (s).
That should be enough to show the error (s) under each field and highlight them in red.
HIH
I have a form:
<form action="login" method="post" name="loginForm">
User Name: <input type="text" name="userName" autofocus>
Password: <input type="password" name="pwd">
<input type="submit" value="Login">
Register
</form>
Now whenever I hit submit button it will show /login in the address bar. I want to it to show /index.jsp with an error message if user or password do not match.
I used sendRedirect method but how to send the error message? If i have to use session then I must remove the attribute too. What if I do not want to use session and still want to send the error message? How can I achieve that?
Try this :
response.sendRedirect("/index.jsp?error=something");
And retrieve the param from your jsp like this:
Error message : <%= request.getParameter("error") %>!
I have a JSP page which reads data from HTML and has CSS,Jquery code in it .
Now my webpage in jsp has two text labels and a add button next to them.
User can enter any no of values in the text field.
Now my requirement is that every time user enters the alue in these fields and clicks on add then that data should be passed on to my servlet. Servlet will basically do some validation and return a boolean variable.
Based on the value of this boolean, I shall change the appearance of my text boxes.
This is required to be done for every time user clicks on Add button.
How can I achieve this ?
My HTML code :
<div id="id1" name="id1" style="display: none;">Add a node: </br>
<input type="text" name="ipaddress" id="ipaddress" placeholder="Enter Node IP"> <input type="text" name="port" id="port" placeholder="Enter Node Port">
<input type="button" value="Add" name="addnodebutton" id="addnodebutton"/>
</div>
The value in ipaddress and port shall be passed on to my servlet and depending on return parameter, their appearance should change.
Can anyone enlighten me how this is actually going to work ?
TIA :)
For passing data to and from a servlet, you have options.
Option 1- You can wrap your html in a form tag and set the action/method properties for your servlet/http method like below:
<form method="POST" action="servletname">
<input type="text" name="ipaddress" id="ipaddress" placeholder="Enter Node IP">
<input type="text" name="port" id="port" placeholder="Enter Node Port">
<input type="submit" value="Add" name="addnodebutton" id="addnodebutton"/>
</form>
The submit would send a request with the input to your servlet. You would then need to handle your request parameters in your servlet, set your values/flags in your response object and forward to the user or jsp/html page of your choice.
Option 2- You can make an ajax call from your jsp, process your input and return a response to your page asynchronously. Example below:
A Simple AJAX with JSP example
I am trying to handle the form-data and put it in the data base derbi that comes with netbeans.The server i am using is Glassfish. After filling the form when i click the submit data button, according to the action handler the request should follow to a servlet named FormHandler.do but when i try to reach out to the page FormHandler.do this is the error message displayed by the browser :
This webpage is not found
No webpage was found for the web address:
file:///W:/UnderTest/WebApplication_GLASSFISH/src/java/FormHandler/FormHandler.do
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
But the file is there in the same directory as the html file (that has form). This is the type of url i give in the form tag:
<form method="post" action="FormHandler.do">
<b>Name:</b><input type="text" name="Name" /> <br /> <br />
<b>Email:</b><input type="email" name="Email" /> <br /> <br />
<b>Password:</b><input type="password" name="Password" /> <br /> <br />
<input type="submit" value="Register" />
What could be the reason for this problem ?
(After the request goes to the servlet FormHandler.do it checks (as per logic) if the text fields are empty. If they are empty it forwards the request to a servlet that shows the errors and if correct it inserts that data into the database and shows the success servlet.)
No webpage was found for the web address:
file:///W:/UnderTest/WebApplication_GLASSFISH/src/java/FormHandler/FormHandler.do
You need to access web resources by a HTTP path, not by a local disk file system path. Something like as:
http://localhost:8080/WebApplication_GLASSFISH/FormHandler.do
The /WebApplication_GLASSFISH part is the context path. It's unclear which one you're using, but this information is printed in the server's startup log. Something like as this:
INFO: WebApplication_GLASSFISH was successfully deployed in 3,770 milliseconds.
You need to make sure that the URL in your browser address bar matches this.
Also, HTML files should go in "Web Pages", not in "Source Packages". After you move the Registration.html into "Web Pages", you can open it by
http://localhost:8080/WebApplication_GLASSFISH/Registration.html
This way the form will submit to the proper servlet URL assuming that you've a
<form action="FormHandler.do">
This all is rather trivial. I'd suggest to go through a bit decent Servlet book/tutorial once again. Put your mouse above the servlets tag which you put below the question and click at the info link to get a good starting point.
Using IE 7, JDK 1.6 and Sun Web server 7.
Inside the jsp form, we have:
<input type="text" name="id" maxlength="20" />
<input ... type="submit" name="send" value="Send"/>
i.e. a text box and a "Submit" button (called Send).
and the servlet has:
if (request.getParameter("send") != null && request.getParameter("send").trim().length() > 0) { ... }
Using Fiddler and IE, we can see that the following is sent when we populate the id text box and hit Enter:
id=123456
However, using Fiddler and IE, we can see that the following is sent when we populate the id text box and click the Send button:
userId=123456&send=Send
The end result is that hitting the Enter key effectively does nothing.
On other jsp pages, e.g. we have:
<input type="text" name="id" maxlength="20" />
<input ... type="submit" name="submitId" value="Submit"/>
and the servlet has:
if (request.getParameter("submitId") != null && request.getParameter("submitId").trim().length() > 0) { ... }
Using Fiddler and IE, we can see that the following is sent for both cases:
id=123456&submitId=Submit
So it seems to us that the behaviour is only exhibited on IE for forms where the "Submit" button is not called "Submit"?
Re-running the tests on Firefox 3.6 shows that the behaviour is correct and the same for both cases.
Any suggestions for getting IE to work correctly?
(Note: I have searched SO for a similar problem but the questions relating to this mainly all ASP related!).
This is indeed another IE anomaly in case of forms with only one input field. The only solid workaround for this is to add a second input field(!). You can hide it using CSS. No, type="hidden" ain't going to work.
<input type="text" name="id" maxlength="20" />
<input type="text" style="display: none;" />
<input type="submit" name="send" value="Send"/>
Why are you checking for request.getParameter("submitId") in your JSP when in fact submitId is the name of your submit button?
In my experience I never had to check the value for the submit button. I only used that button to trigger the form submit and would usually only be interested in retrieving the values for the other form parameters.
If you want to differentiate the submit methods by the name of the submit button, you might want to try adding a "hidden" property using input type="hidden".