I need to do something like that:
<form:errors path="*">
<div class="error">
<div class="internal">
${error}
</div>
<div class="bar"> </div>
<div class="internal">
<input type="button" value="Ok" />
</div>
</div>
</form:errors>
How can I get all the error messages by using the above HTML code? :S
By using <form:errors path="*" cssClass="error" /> it will be inside only one tag
You can use the spring:bind tag to bind a status-variable to your current error messages. Then you can iterate over status.errorMessages like in the example below.
<spring:bind path="*">
<c:forEach items="${status.errorMessages}" var="error">
<div class="error">
<div class="internal">
${error}
</div>
<div class="bar"> </div>
<div class="internal">
<input type="button" value="Ok" />
</div>
</div>
</c:forEach>
</spring:bind>
Don't forget to add the taglib declaration for spring: tags on top of your page:
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
Related
I am trying to assert that a div containing a required checkbox adds the class "has-error" when submit is clicked before the element is filled out. Here is what the test output looks like before clicking:
`<body>
<div>
<div
class="sheet sheet-xl mb-4 sheet-fed-bordered"
>
<form>
<div
class="form-group"
>
<div
class="row"
>
<div
class="col-md-6 col-lg-6"
>
<input
aria-describedby=""
aria-invalid="false"
aria-labelledby=""
class="form-check-input"
id="test"
name="test"
required=""
type="checkbox"
value=""
/>
<label
class="form-check-label"
for="test"
>
Test
</label>
<div
aria-live="polite"
class="form-feedback-group"
id="test-errors"
/>
</div>
</div>
</div>
<button
class="btn btn-primary fed-focus-outline"
data-testid="form-wrapper-submit-btn"
type="submit"
>
Submit
</button>
<hr />
<pre>
{
"test": false
}
</pre>
</form>
</div>
</div>
</body>`
What is the best way to get a hold of the third div with class="form-group" to later test that the class changes to "form-group has-errors"?
I have tried:
screen.getByRole("div"), screen.getByRole("div", {class: "form-group"}, screen.getByRole("div", {className: "form-group})
And many other variations of the above and of findByRole, queryByRole, etc...
i have some probelm in spring tag form input..
if i use <form:input>..there will be error displayed
java.io.IOException: JspException when evaluating the body but if i used html tag, it's can't connect to database.
<form:form method="POST" action="/sampling/insert"
modelAttribute="sampling">
<div class="form-row control-group row-fluid">
<label class="control-label span3" name="populasi" for="normal-field">Population</label>
<div class="controls span9">
<form:input path="populasi" type="text" id="normal-field"
class="row-fluid" />
</div>
</div>
<div class="form-row control-group row-fluid">
<label class="control-label span3" for="normal-field">Error
Rate</label>
<div class="controls span9">
<form:input path="tKesalahan" name="tKesalahan" type="text"
id="normal-field" class="row-fluid" />
</div>
</div>
<input type="submit" class="btn btn-success" rel="tooltip"
data-placement="top" value="Submit" />
</form:form>
Try this:
name, type are not valid attributes
change the tag attributes:
<form:input path="tKesalahan" id="normal-field" cssClass="row-fluid" />
Reference: spring input tag attributes
I'm not able to resize Jasny's Fileupload form. First I made a centered span8 with offset2. Then I put a simple input form into the span and set it to 'input-block-level'. That's working fine: the input form has now a size of span8.
I want to do the same with the Jasny's Fileupload. I tried a lot, but it didn't work for me. What I need, is a function that replaces the span3 entry in class="uneditable-input span3" with some kind of auto-resizing function, that stretches the input box to span8. Replacing span3 with input-block-level also doesn't work.
Another possibility would be a fixed value for the control button (maybe span3) and a for the input field (span5).
Any ideas?
<div class="row-fluid">
<div class="container pagination-centered">
<div class="span8 offset2" style="background-color:#FFCC33">
<form class="form" action="someaction" method="post" enctype="multipart/form-data" style="background-color:#FFFFFF">
<div class="control-group">
<div class="controls">
<input type="text" id="someid" name="somename" class="input-block-level" placeholder="well stretched box">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue
I want to design a form something like this:
I went through the documentation of Twitter Bootstrap and found that there is no proper way of doing it unless you do some CSS hacks over to achieve that. I don't want to do any CSS hacks because they make the page unresponsive.
Is there any proper way for achieving this ?
I have come up with the following code for my form:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="input-mini" for="first">Start</label>
<label class="input-mini" for="first">End</label>
<label class="input-mini" for="first">Share</label>
</div>
<div class="control-group form-inline">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
</div>
</fieldset>
I have also created a jsfiddle. There are two problems with the above form being rendered:
Labels are not horizontal.
The space between text input is not proper.
Yes you can achieve that layout with the help of the grid.
Something like this should do the work:
<div class="container">
<div class="row">
<div class="span1">
One
</div>
<div class="span1">
Two
</div>
<div class="span1">
Three
</div>
</div>
<div class="row">
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
</div>
<div class="row">
<!-- Same as above -->
</div>
<div class="row">
<!-- Same as above -->
</div>
</div>
See the demo here: http://bootply.com/60908