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
Related
I have been doing school's project recently and started learning Java Web/Spring/Bootstrap and stuff only a week ago, so please do forgive and correct me if I got any idea wrong.
So I was working on some webpage following an online tutorial and it's really great that I can fetch user's input by using Thymeleaf tags like codes below
<div class="ip input-group" align="center">
<input id="username" type="text" class="form-control" name="username" placeholder="Username" th:value="*{username}"/>
</div>
Though I'm having a hard time trying to fetch input from select box or radio button like codes below (am I doing anything wrong here?)
<div class="input-group">
<select class="btn btn-default" th:value="*{sex}">
<option>Male</option>
<option>Fmale</option>
<option>Other</option>
</select>
</div>
Since it's able to fetch input from simple input area, I'm thinking that there should be a way to acquire input or data from select box or radio button by using Thymeleaf?
th:field tag should be in <select> tag, but it does not exist.
th:value tag should be in <option> tag, not in <select> tag.
As described in thymeleaf docs:
Select fields have two parts: the tag and its nested
tags. When creating this kind of field, only the tag has to
include a th:field attribute, but the th:value attributes in the
nested tags will be very important because they will provide
the means of knowing which is the currently selected option (in a
similar way to non-boolean checkboxes and radio buttons).
Code snipped in source
I'm trying to use thymeleaf to generate edit and delete modals for each element in the model in my ModelAndView using th:each.
The modals are indeed created and have unique ids based on the id field of the elements. The problem I have is none of the values from elements are parsed into the inputs to enable the user to see the current values.
They are obviously there because the view also has a table which displays each element's values along with the anchors which toggle the modals.
Here's some example code of how I'm doing it:
<div th:each="f : ${foos}" th:id="um- + ${f.id}" class="modal fade"
tabindex="-1" role="dialog">
...
<form role="form" th:action="#{/foo/update}" th:object="${foo}" th:method="post">
<input type="hidden" th:field="*{id}" th:value="${f.id}"/>
<fieldset class="form-group">
<label for="bar">Bar</label>
<input th:field="*{bar}" th:value="${f.bar}" class="form-control"
id="bar" type="text" placeholder="Bar"/>
</fieldset>
...
</form>
...
</div>
How to generate edit modals for each element in the model? I'm not sure why thymeleaf is unable to get the values of the fields from the model elements.
That's not a great approach actually. In addition to it not working, doing using a loop obviously creates n modals for the collection.
The solution that worked best was to provide a single modal that would be populated and submitted with Ajax calls.
This no-frills Spring Boot app has all the relavant code.
I am having a hard time trying to figure out the correct process for automating login for the following website: http://abelhas.pt
I have used Firefox's HttpFox plugin to discover the login form and action page url, in the generated HTML code and have found out that to perform login, I will need to post the following parameters:
Login=theLogin
Password=thePassword
Redirect=True
RedirectUrl=
RememberMe=false
FileId=0
The url to which the parameters are being passed when the user presses the submit button, is the following: "/action/login/login" (which is the one shown on the "action" attribute of the html element)
However, when generating and posting it using the following URL:
http://abelhas.pt/action/login/login?Login=theLogin&Password=thePassword&Redirect=True&RedirectUrl=&RememberMe=false&FileId=0
(Please note that the the values of "theLogin" and "thePassword" should be replaced by a valid login and password)
I am always getting "http://abelhas.pt/Error404.aspx", meaning that the following webpage was not found...
In the past, I have already been able to successfully automate logging-in in websites such as Google, filefactory, zippyshare, Imageshack, etc..however this one seems to be playing tricks on me...
Can someone help me understanding what is happening or what am I doing wrong?
Many thanks guys!
Gizmo
In my vaadin application i want to redirect to a website with automatic log in.
Now the issue is am unable to logIn through my java code which refers from
http://www.mkyong.com/java/how-to-automate-login-a-website-java-example/
Am also getting response code: 200, and unable to make use of response.
Following is the code snippet of the website to which i want to automate login
<form action="login.php" method="post" id="clientLogin">
<input type="hidden" name="__CSRFToken__" value="eac035fe0a1a64a9945e0ce798a44a52ca040b5c" /><div style="display:table-row">
<div class="login-box">
<strong></strong>
<div>
<input id="username" placeholder="Email or Username" type="text" name="luser" size="30" value="">
</div>
<div>
<input id="passwd" placeholder="Password" type="password" name="lpasswd" size="30" value=""></td>
</div>
<p>
<input class="btn" type="submit" value="Sign In">
</p>
</div>
<div style="display:table-cell;padding: 15px;vertical-align:top">
<div>
<!--<b>I'm an agent</b> —
sign in here
-->
</div>
</div>
</div>
</form>
I have the following html:
<label wicket:id="drugSearchResult.row.item.label" for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
But label element are not allowed to add a child component.
Is there any way to achieve this html requirement?
This is the designer's requirement:
Drug XYZ // label
Information, Price, Other // span
Make sure you're using FormComponentLabel for the <label> element instead of Label.
Label's purpose is to output text inside the associated element (it can be a <span>, <div> or almost any other tag).
FormComponentLabel's purpose is to model <label> tags. They receive the FormComponent they're related to and automatically output the for attribute with the proper value for the dom id attribute.
Take a look at the Wicket wiki page on Form control labels. They're adding components to FormComponentLabel there.
If you'd like to avoid using FormComponentLabel at all, you shouldn't be giving it a wicket:id attribute, and manually set the DOM id attribute of the element the <label> is going to refer to. Then just use it in the for attribute of the <label>.
For instance:
HTML
<input wicket:id="drug">
<label for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
Java
TextField drug = new TextField("drug");
drug.setMarkupId("drug_1"); // Make sure this ID is unique in the page!
drug.setOutputMarkupId(true);
add(drug);
Label drugDescription = new Label("drugSearchResult.row.item.label", aModel);
add(drugDescription);
Using properties and <wicket:message>
For me, the approach below is useful.
In my project, I have only one location per page where the text for the <label>s and validation messages is defined. It's the properties file of the web page.
The additional <div>s and their class attributes are from Bootstrap.
<div class="form-group required">
<label wicket:for="customer.name1">
<wicket:message key="customer.name1"/>
</label>
<div class="controls">
<input type="text" wicket:id="customer.name1" required class="form-control">
</div>
</div>
Java
add(new RequiredTextField<String>("customer.name1")
.setLabel(new StringResourceModel("customer.name1")));
customerPage.properties
# siehe wicket-core-7.9.0-sources.jar!/org/apache/wicket/Application_de.properties
Required='${label}' ist erforderlich
customer.name1=Name 1
customer.name2=Name 2
customer.department=Abteilung
customer.phone=Telefon
customer.active=aktiv
I am having problems with submitting form data in spring. <spring:bind> seems to be a part of the solution. See my full problem here.
The documentation of BindTag found here is not clear to me. Why is <spring:bind> needed in some cases to submit data, while it is not needed in most cases?
What are the typical cases where the <spring:bind> must be used in order for a form to function properly?
You will find the tag <spring:bind> useful when you want to parse multiple objects from an input form. Here's a modified example from the Spring's doc (http://docs.spring.io/spring/docs/1.2.6/taglib/tag/BindTag.html):
<form method="post">
## now bind on the name of the company
<spring:bind path="company.name">
## render a form field, containing the value and the expression
Name: <input
type="text"
value="<c:out value="${status.value}"/>"
name="<c:out value="${status.expression}"/>">
</spring:bind>
<spring:bind path="address.street">
Name: <input
type="text"
value="<c:out value="${status.value}"/>"
name="<c:out value="${status.expression}"/>">
</spring:bind>
<input type="submit">
</form>
Although I've never used this tag myself, my understanding of the documentation is this. A tag will provide you with information about the binding status of a form property to a bean. For example in:
<form:form modelAttribute="employee">
<form:input path="name"/>
<spring:bind path="name"/>
<spring:bind path="employee"/>
</form:form>
The tag will display (or expose through a BindStatus object) all errors that have occurred with the name attribute (the first case) and all errors on the Employee entity and its attributes (the second case). I am not sure that this tag has anything to do with the succesfulness of submitting data, but rather that it's used as an information tool.