Develop Reference

How to show a form conditionally using Thymeleaf?

I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf
Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.
As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form.
I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.
The relevant part of the code
<td>
<a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
<form th:action="#{/updatePickupId/{id}(id=${ticket.id})}"
th:method="post" th:style="'display: hidden'">
<div class="checkbox-list w-150px">
<input type="text" name="pId" value=""
placeholder="Pick Up Id"
th:classappend="${ticket.pickedUp} ? 'required' : ''">
<input type="submit" value="Save"/>
</div>
</form>
</a>
</td>
As you can see I have used th:style="'display: hidden'" in the form but I don't know why its not working and the form is visible all the time.

How can I implement jQuery validation like MVC data annotation?

I am using MVC and have a master/details view page. Details is actually a partial view with some input fields an a save button as shown below.
<button type="button" id="btnAddDetails" class="btn btn-primary">Add Details <span class="glyphicon glyphicon-plus"></span></button>
The save button will save the details data temporarily.
There is a submit button in the main view. When I click on the submit button it saves master and details data in the respective tables. I want to validate master and details fields individually. When I click on the button in details view (partial view) it will validate the data with the details model and final submit will check the master data with the master model. Master data validation can be done easily by using data annotation. But how can I validate details. Because both master and details are placed in a single Html.BeginForm(). I am trying jQuery to validate details on button click event :
if ($('#Disc').val() == '')
{
$('data-valmsg-for="Disc"').val("Please enter Diacount");
return false;
}
I use data-valmsg-for because in the view source page HTML is like:
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Discount must be a number." id="Disc" name="Disc" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Disc" data-valmsg-replace="true"></span>
And I am getting an error like
Uncaught Error: Syntax error, unrecognized expression: data-valmsg-for="Disc"
How can I validate details part like data annotation in master.

If you want to target a data- attribute as a selector you have to use square brackets. Also I'm not sure you can use val() on a span. Try this:
$('[data-valmsg-for="Disc"]').html("Please enter Diacount");

angular required message on $error.required OR (pristine AND empty value)

I have searched for a solution all over, so here is my first question to this site:
I am trying to have some nice validation in angular (ionic) page where the logic is I want to show a "Required" message under label when either there is a validation error ($error.required) OR the field has not been touched and is empty (like a first time load). I can use pristine to check if it is not been modified, but if the form loads values from the model subsequently (like when restoring from localstorage), it still shows the "required" validation message.
I have tried the following:
<form name="wdform" novalidate>
<label class="item item-input item-stacked-label">
<span class="input-label green-small">ID</span>
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && wdform.userid.length < 1)" >
Required
</div>
<input name="userid" ng-model="input.UserID" type="text" required>
</label>
... rest of form...
</form>
Also have tried:
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && input.UserID.length < 1)" >
and various other permutations such as:
(wdform.userid.$pristine && input.UserID == '')
(wdform.userid.$pristine && wdform.userid.$invalid)
etc. ad nauseum.
On a separate but related note, I have also found that the built in validation is pretty brittle when it comes to form and field names... it only seems to work at all if the form name is only lowercase and/or contains no special characters ("DumbForm" and "dumb-form" fails, but "smartform" works).
Anyway, does anyone have any thoughts?

I feel like your two scenarios, (1) $error.required and (2) pristine and empty, might be redundant. Anytime #2 would be true, so would #1. I think you could use just #1.
Look at this example:
http://plnkr.co/edit/PgQ3vEIOKkfA38dDWjhp?p=preview
<body ng-controller="myController as vm">
<h1>Hello Plunker!</h1>
<form name="wdform">
<input type="text" name="userid" ng-model="userId" required/>
<div ng-show="wdform.userid.$error.required">Required</div>
</form>
</body>
However, it sounds like you are populating your form on page load some times from localStorage and somehow this is not causing the $error.required property to be changed to true, but it should. So your real problem I think lies in need to call $scope.$apply() or something to tell angular to run validations again.

I found that the issue was related to where the validation div was placed.
If the validation div was placed before the input field (so that it displayed the validation message beneath the field label), I encountered the error specified in this question.
By placing it after the input tag, it works as expected (with the validation message beneath the input field).
I would consider this a bug either in Angular or Ionic. Hopefully it will be corrected in the upcoming version 2 of both.

<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="f3.form.reset()">
Just add the click in the button.so form loads values from the model in reset().Once click the button form will reset. You get new form with no errors.

AngularJS Stop blocking form

I'm relatively new to AngularJS and I am trying to sumbit a regular form. I have basic form that looks like this:
<form method="post" enctype="multipart/form-data">
input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="" />
<input type="file" name="post_image" />
<input type="submit" class="btn btn-success" value="Create Post" />
</form>
But I noticed that AngularJS adds its own values to the form.
<form method="post" enctpye="multipart/form-data" class="ng-pristine ng-valid">
And I am ununable to submit the form. How can I disable the automatic validation that Angular JS is adding to the app?

Quoted from the documentation:
For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.
IMHO, you should read the doc to gain some general understanding of single page application, and the reason why angular's preventing the default behavior.

UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore.
ng-non-bindable is possibly your best choice. It will prevent AngularJS from doing ANY validation. So, you'll be responsible for showing invalid and checking validity.
https://stackoverflow.com/a/19387233/75644

Angularjs/javascript ng-model

I've started to learn angularjs not that much time ago. And I'm about to write some form application. The thing is that when I'm trying to output default value from select and some datepicker (got it from twitter bootstrap) into the table, it doesn't appear when page is loaded. Also, when I change date on datepicker it still doesn't appear in the table but if I change select options it appears. So how can I fix it? I need to output datepicker value when I change it + output default values when page is loaded.
Here's Datetimepicker
<label> <b> * Date and Time of Incident: </b> </label>
<div id="datetimepicker" class="input-append date">
<input type="datetime" ng-model="date" name="date" required></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Here's random input:
<label> <b> * Reported By: </b> </label> <input type="text" name="report" ng- model="report" required / >
When I use: {{report}} - it shows what I've been entered, but if I use {{date}} it doesn't show anything, only If I write something manually, but I want disable this field for users so he can only choose dates\time.

You may want to check out this: https://github.com/angular-ui/ui-date. It's datepicker written as angular directive. You can find plenty of useful angular utils, modules and directives here: http://angular-ui.github.io/.

Ok. I think the problem is that Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply(function() { $()... }); But you need a controller for that.
Here are an example
Or you can use the "oficial" calendar for angular:
https://github.com/angular-ui/ui-calendar
Cheers!