Thymeleaf iteration with a specific integer, but not using an array size or index - iteration

Does anyone know if it's possible using thymeleaf templates to iterate with a specific numerical value that does not come from the index or the size of an array?
For example:
for(i=0;i<4;i++).
So something similar to a for loop and yes I have looked at the thymeleaf docs.
Thanks in advance!!
Hopefully this helps. The form below will be used to take in a chemical name along with a few other details which are the other fields. I would like to repeat the form fields a specific number of times which is determined by the user. So if the user is asked "how many chemicals would you like to add to your list?" and the answer is 3 I would like to have the form fields repeat 3 times.
<form method="post" th:object="${reagent}">
<div>
<label th:for="chemName">Compound/Reagent</label>
<input th:field="*{chemName}" />
<span th:errors="*{chemName}"></span>
</div>
<div>
<label th:for="mw">Molecular Weight(g/mol)</label>
<input th:field="*{mw}"/>
<span th:errors="*{mw}"></span>
</div>
<div>
<label th:for="density">Density(g/L)</label>
<input th:field="*{density}"/>
<span th:errors="*{density}"></span>
</div>
<div>
<label th:for="hazard">Hazards</label>
<textarea th:field="*{hazard}"></textarea><br/><br/>
<span th:errors="*{hazard}"></span>
</div>
<br/>
<input type="submit" value="Add Chemical"/>
</form>

Related

vue.js: reverse the order of v-for loop

I'm looking for something like the code below to display a list of topics from the array right under the box where user adds them. (newest on top)
I know I can unshift instead of pushing to change the order topics are stored in the array but is there a way to keep the original array order and just reverse the displayed topics without triggering the
"[Vue warn]: You may have an infinite update loop in a component render function."?
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
the slice method will create a copy of your array. Use it before reverse to only reverse the copy.
topics.slice().reverse();
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.slice().reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
More info : https://stackoverflow.com/a/30610528/5671919

Using ref in a repetitive environment

I'm using a custom element to print the length of an input element. I got it working in a regular environment, but I have trouble creating unique refs in a repeat.for environment
I've tried using combinations of ref=name$index or ref=name${$index}, but none of them work so far.
In a non-repetitive environment, this works
<div class="row">
<label>
Name
<my-custom-element field.bind="name"></my-custom-element>
<input
type="text"
name="name"
ref="name"
value.bind="name"
maxlength="150" />
</label>
</div>
However, once I use repeat for, it stops working, cause I am using field.bind and ref wrongly. E.g.
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="name${$index}"></my-custom-element>
<input
type="text"
name="name${$index}"
ref="name${$index}"
value.bind="item.name"
maxlength="150" />
</label>
</div>
I'm just trying to make the ref look something like name0, name1, name2 etc, so that it is unique.
The error looks like Parser Error: Unconsumed token { at column 5 in expression [name${$index}]
You are iterating through items, which presumably is an array of objects having a name property. I think you want something more like the following:
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="item.name"></my-custom-element>
<input
type="text"
name="item.name"
ref="item.name"
value.bind="item.name"
maxlength="150" />
</label>

BEM. How to deal with label for/id?

As far as I know, BEM does not use elements id at all. But how to deal in this case with the label for/id combined with inputs? If I do not use id, people who're using screen readers will not get that this label is for that input. Am I right?
BEM suggests avoiding id for css selectors. It's perfectly valid to use id for A11y and usability.
<form class="form" method="post" action="">
<label for="email" class="form__label">Email</label>
<input type="email" id="email" class="form__control"/>
</form>
In the example above we are styling the input as an Element of the form block with the form__control class.
Also you can not use aria attributes without id for pointers to descriptive elements.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Example taken from: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

What is the Best Practice for placing validation messages using Twitter Bootstrap 3

I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)

Selenium test an iterface where misses id and title and other sensible information

I'm working for a client who wants me to do selenium/junit tests but the whole user interface doesn't show any id for the html code nor title for the page, just content like "Welcome in ...", how whould you do to check that one is on the home page or in the page for the login for example?
This is an example of the html:
<div class="site-body m-welcome" data-module="welcome">
<div class="inner">
<h1 class="starred dark"><span>Welcome to ...</span></h1>
<div class="choices">
<div class="choice">
Become a xxxxx
</div>
<span class="or"><span>Or</span></span>
<form action="http://www.alink/welcome" method="post" class="choice" data-response-type="json">
<input type="text" name="plate_number" id="car_plate_validation_plate_number" value="" maxlength="8" class="plate required numberplate" placeholder="Enter number plate">
<button type="submit" class="btn btn-primary">Become an yyyyy</button>
<div class="invalid-message inline-modal" data-behavior="modal">
<h1>Sorry - you are not eligible to join the company</h1>
<p>See am I eligile? for full eligibility critera.</p>
</div>
</form>
</div>
You can use XPath to find almost all elements, I wouldn't use it often but in your case (where nothing has IDs) you'll probably need to use it very often:
IWebElement element = driver.FindElement(By.XPath, "//*[text='Welcome in ...']");
That will get you the first element of any type that has the text within it of "Welcome in ..."
For checking if you are on a certain page, I guess you'll have to search for an element that is unique to that page and no other pages.
You'll need to show us some of the HTML if you want more specific examples.
Example of html:
<div class="site-body m-welcome" data-module="welcome">
<div class="inner">
<h1 class="starred dark"><span>Welcome to ...</span></h1>
<div class="choices">
<div class="choice">
Become a xxxxx
</div>
<span class="or"><span>Or</span></span>
<form action="http://www.alink/welcome" method="post" class="choice" data-response-type="json">
<input type="text" name="plate_number" id="car_plate_validation_plate_number" value="" maxlength="8" class="plate required numberplate" placeholder="Enter number plate">
<button type="submit" class="btn btn-primary">Become an yyyyy</button>
<div class="invalid-message inline-modal" data-behavior="modal">
<h1>Sorry - you are not eligible to join the company</h1>
<p>See am I eligile? for full eligibility critera.</p>
</div>
</form>
</div>