How to manually add MVC client-side validation? - asp.net-mvc

I'm using jquery (unobtrusive) validation for MVC, and I have a field that is not a part of my model, so I'd rather not add it JUST to give it some data annotations.
And, all I need is to ensure that the value is equal to 100 ... I'd like this validated along with everything else.
I read this article: http://www.blinkingcaret.com/2016/03/23/manually-use-mvc-client-side-validation/
And, I added
data-val="true"
As well as
data-val-equalto="100"
But this didn't work.
<input type="text" name="smtotal" id="SMTotal" class="form-control " readonly="readonly" data-val="true" data-val-equalto="100"/>
<span class="field-validation-valid" data-valmsg-for="smtotal" data-valmsg-replace="true">This must equal 100</span>

There are a few issues. First, the data-val-equalto is where you put the error message that you want to display, not the value that you want to compare with. Also the equalto validator compares with a value in another field, not an arbitrary value like 100. You will have to provide the name of the other field in the data-val-equalto-other attribute.
To compare with a fixed value like 100, you can use the range validator and use the same value for the minimum and maximum, like this:
<input type="text" name="smtotal" id="SMTotal" class="form-control" readonly="readonly"
data-val="true" data-val-range="This must equal 100"
data-val-range-min="100" data-val-range-max="100" />
<span class="field-validation-valid" data-valmsg-for="smtotal"
data-valmsg-replace="true"></span>
Notice that I didn't provide a message in the span, because the message is coming from the input. If you want to put the message in the span, then you have to set data-valmsg-replace to false.

Related

Input Fields Not Displaying Data in Microsoft Edge

I have an ASP.NET MVC 5 application using Razor. When it loads, it displays saved data in input fields. This works fine in IE 11, but when viewing in Microsoft Edge 90.0.818.51, the values are not being displayed.
When I view the source I see the value is set, but am not sure why it's not displaying in Edge. Has anyone been experiencing this?
<input class="small-input form-control text-right" data-val="true" data-val-regex="The field must match the regular expression '^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$'." data-val-regex-pattern="^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$" id="SignificantActivityInputs" name="SignificantActivityInputs" type="number" value="10%" />
There are other fields that are displaying the text. The difference I can see with them are:
They have an associated field that is of type "hidden"
The "main" field is of type "text" where the ones that aren't displaying are of type "number" as shown above.
Has anyone else experienced this?
The type should be text, instead of number
<input class="small-input form-control text-right"
data-val="true"
data-val-regex="The field must match the regular expression '^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$'."
data-val-regex-pattern="^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$"
id="SignificantActivityInputs"
name="SignificantActivityInputs"
type="text"
value="10%" />

How to format date using message.properties on thymeleaf?

I'm using thymeleaf and I need to format this field to a specific date. It's working the way it is, but I need the date format to be into the message.properties.
So this is working:
<input type="text" id="dtFrom" class="form-control " placeholder="yyyy-MMM-dd" th:attr="placeholder=''+#{default.date.format}+''" autocomplete="off" th:name="startDate" th:value="${srchCmd.startDate}?${#dates.format(srchCmd.startDate, 'yyyy-MMM-dd')}">
</input>
But instead I need something like this:
<input type="text" id="dtFrom" class="form-control " placeholder="yyyy-MMM-dd" th:attr="placeholder=''+#{default.date.format}+''" autocomplete="off" th:name="startDate" th:value="${srchCmd.startDate}?${#dates.format(srchCmd.startDate, #{default.date.format})}">
</input>
When I select the date instead of having the date formatted on the text input I have this:
??welco12e.12essage_en_US??
How is the right way to use #{} inside ${}? Not sure if that's the problem though.
My usage is slightly different, but, I was able to get the basic concept to work using:
<span th:text="${#dates.format(timestamp, #messages.msg('timestampFormat'))}">10/31/2018 11:59:07 -0500</span>
where my messages.properties file contains a (valid) value for 'timestampFormat', and timestamp is an available Model attribute (type Instant, for java8).
Note that I had to use #messages.msg('key') explicitly here.

Difference between th:text and th:value in Thymeleaf

I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>

Comparing Strings in Grails GSP

I'm stumped by this problem. I'm trying to display a class if a certain string is equals to the logged in username. However it doesn't seem to ever evaluate to true.
Here's the code in gsp
<g:if test="${it.from.username == sec.loggedInUserInfo(field: 'username')}">
<div class="direct-chat-msg right">
</g:if>
<g:else>
<div class="direct-chat-msg">
</g:else>
I also tried using this method
<div class="direct-chat-msg ${(it.from.username == sec.loggedInUserInfo(field: 'username')) ? 'right' : ''}">
However nothing I do can get the 'right' class to show up in the div.
Just for good measure, I printed out the values of both classes in my gsp in hidden fields.
<input type="hidden" value="${it.from.username}"/>
<input type="hidden" value="${sec.loggedInUserInfo(field: 'username')}"/>
And the values are exactly the same
<input type="hidden" value="u***#gmail.com">
<input type="hidden" value="u***#gmail.com">
I've tried several combinations of string comparison
.equals(), calling .toString() on both, also trying as String. however nothing seems to be working.
What could the issue be?
I have tried passing the logged in user object in the Model from the controller, and just calling loggedInUser.username and it works. So my question now is, what kind of object is returned by spring security?
The result of sec.loggedInUserInfo(field: 'username')} is an HTML encoded string. Spring security calls encodeAsHTML() before returning 'username' value. Visually they look the same but are they equal? Apparently not!

How to add specific attribute (like "multiple") to Thymeleaf templates?

I have this:
<input id="fileupload" type="file" name="files[]" data-url="rest/controller/upload" multiple>
and I need to make it work in a Thymeleaf template. I have the data-url part figured out but I keep getting an error on the word "multiple". This is needed to allow multiple selection in the file selection window.
I have looked everywhere and have not come across an answer.
EDIT:
If you are not familiar, here is the "multiple" attribute.
http://www.w3schools.com/tags/att_input_multiple.asp
The Standard Dialect of Thymeleaf includes attributes that allow you to set these attributes by evaluating a condition, so that if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set:
e.g for checkedattribute:
<input type="checkbox" name="active" th:checked="${user.active}" />
you have to use:
th:multiple
e.g
<input id="fileupload" type="file" name="files[]" th:multiple="{condition}">
see a tutorial here.

Resources