We Keep Coding

Thymeleaf client side validation

I am new to thymeleaf and I working on a login form. I have found a simple example where there is login input text and password fields.
I have included the project in my system. When I click the login button without filling username and password section, a please fill in details ballon pops up. I have not configured it anywhere, but would like to know from it is getting popped up. Below is the code
<div class="row" style="margin-top:20px">
<div class="form-group " align="right">
</br> </br> </br> </br> </br></br> </br> </br> </br>
<form th:action="#{/login}" method="post">
<fieldset>
<h2 class="form-heading">Log in</h2>
<div th:if="${param.error}">
<div class="alert alert-danger">
Invalid username and password.
</div>
</div>
<div th:if="${param.logout}">
<div class="alert alert-info">
You have been logged out.
</div>
</div>
<div class="form-group">
<input type="text" name="username" id="userName" class="form-control input-lg"
placeholder="UserName" required="true" autofocus="true"/>
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg"
placeholder="Password" required="true"/>
</div>
<div class="row">
<button class="btn btn-default" role="button">Log In</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>

Thymeleaf adding attribute to only the first item from the each loop

I'm trying to validate with parsley but by adding a data-parsley-min="1" to my input loop will add them to all of them.
For some reason it's not working now and I'm thinking it's because the multiple data-parsley-min="1" attributes.
Here's my code:
<form id="questionSubmitForm" data-parsley-validate="">
<div class="form-group">
<label class="font-weight-bold" for="prechecks">Pre-checks</label>
<div class="form-check" th:each="researchType : ${question.research}">
<input class="form-check-input" type="checkbox" name="prechecks[]" th:value="${researchType.value}" data-parsley-mincheck="1">
<label class="form-check-label" th:for="${researchType.value}" th:text="${researchType.key}"></label>
</div>
</div>
</form>

You can use th:attrappend (and the iteration status -- notice the , i in the th:each attribute) for this:
<form id="questionSubmitForm" data-parsley-validate="">
<div class="form-group">
<label class="font-weight-bold" for="prechecks">Pre-checks</label>
<div class="form-check" th:each="researchType, i : ${question.research}">
<input class="form-check-input" type="checkbox" name="prechecks[]" th:value="${researchType.value}" th:attrappend="data-parsley-mincheck=${i.index == 0 ? 1 : ''}" />
<label class="form-check-label" th:for="${researchType.value}" th:text="${researchType.key}"></label>
</div>
</div>
</form>

How to bind data from velocity template to spring controller?

I have a velocity template with tag form.
<div class="row">
<div class="container">
<div class="col-lg-12">
<table class=" table table-striped">
<thead>
<th>#</th>
<th>username</th>
<th>role</th>
<th>password</th>
</thead>
<tbody>
#foreach( $user in $users )
<tr>
<td>$user.id</td>
<td>$user.username</td>
<td>$user.role</td>
<td>$user.password</td>
<td>Delete</td>
<td>Edit</td></tr>
#end
</tbody>
</table>
<form method="post" action="/user">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="role">Role:</label>
<input type="role" class="form-control" id="role">
</div>
<button type="submit" class="btn btn-default">Add</button>
</form>
</div>
</div>
And I need to pass entered data to the controller. Here is controller code.
#RequestMapping(value = "/user", method = RequestMethod.POST)
public String addUser(#ModelAttribute User newUser) {
userService.save(newUser);
return "redirect:/users";
}
I'm newbie in velocity and I haven't figured out in this framework yet. I've google a long time but unsuccessful. Please help velocity guru!

The problem I see here is not just about velocity or Spring. Your form inputs does not have names, it seems you misplaced name for type in your form. It's the input names that's sent to the controller. What you want to do is create a User model and make sure it has the same variable names as the form input names.
public class User {
private String username;
private String password;
private String role;
// Add getter and setter methods
// Add toString method
}
And your form should be like
<form method="post" action="/user">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" name="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="role">Role:</label>
<input type="text" class="form-control" id="role" name="role">
</div>
<button type="submit" class="btn btn-default">Add</button>
</form>
Your controller method should get the user object like that. I just did a simple spring boot app to test and it worked.

Reset path variable from jsp

I have the following problem. See code below.
<form:form action="${pageContext.request.contextPath}/editUser" commandName="user">
<div id="editUserDialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit user</h4>
</div>
<div class="modal-body">
<form:select id="slc_picker" path="id" class="selectpicker" data-width="100%" onchange="javascript:onSelectEditUser()">
<c:forEach items="${users}" var="us">
<option>${us.id}</option>
</c:forEach>
</form:select>
<form:input id="surname" path="surname" type="text" class="form-control" placeholder="Surname"/>
<form:input id="name" path="name" type="text" class="form-control" placeholder="Name" />
<form:input id="fatherName" path="fatherName" type="text" class="form-control" placeholder="Father Name"/>
<form:input id="mobilePhone" path="mobilePhone" type="text" class="form-control" placeholder="Mobile Phone"/>
<form:input id="email" path="email" type="text" class="form-control" placeholder="Email"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save user"/>
<input type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetSelectpicker()"/>
</div>
</div>
</div>
</div>
</form:form>
This is spring form in jsp page. After I clicked submit button, I was sending request to controller, and all my form input(name, surname,... and other) were reset, but after I clicked close button, they contain value, and I want reset all form:input, when I clicked close button. I suppose, thet I must reset object /commandName="user"/.

Try changing button type to reset
<button type="reset" class="close" data-dismiss="modal" aria-hidden="true">×</button>

getText() in WebDriver using Java

The following is the HTML code:
<div id="TITLE" class="text">
<label for="widget_polarisCommunityInput_113_title">Title</label>
<input type="text" name="field(TITLE)" id="widget_polarisCommunityInput_113_title">
<div class="error">This field must not be empty</div>
</div>
I tried to get the text "This field must not be empty" as follows by using WebDriver with Java:
driver.findElement(By.xpath("//div[#id='TITLE']/div")).getText();
driver.findElement(By.xpath("//div[#class='error']")).getText();
But, no text was retrieved. How can I do it? What's the wrong with my code?
Yes, there is a form. HTMl code including form as belows:
<form action="http://community.sandbox.no/content/save.do;jsessionid=F2BF733599D8D9F812B89ACBC20D37C5" method="post">
<div id="widget_polarisCommunityInput_113_leftcolumn">
<input type="hidden" value="article" name="articleType">
<input type="hidden" value="published" name="state">
<input type="hidden" value=" " name="successUrl">
<input type="hidden" value="" name="articleId">
<input type="hidden" value="http://sandbox.no/community/article/" name="redirect_url">
<input type="hidden" value="113" name="widget_id">
<div id="TITLE" class="text">
<label for="widget_polarisCommunityInput_113_title">Title</label>
<input type="text" name="field(TITLE)" id="widget_polarisCommunityInput_113_title">
<div class="error">This field must not be empty</div>
</div>
</form>

You can try as:
driver.findElement(By.xpath("//form/div[#id='widget_polarisCommunityInput_113_leftcolumn']/div[#id='TITLE']/div")).getText();