The current Bootstrap 4 beta adds error class attributes directly to the input tag like this:
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
SimpleForm however, adds the class to the field wrapper. Is there any way to change the initializer so it adds an error class to the input field instead of the field wrapper?
Related
From the documentation (it's what I've understood): when a form is posted to our server, we check it, if it's not valid, me return it. In such case, we must add class="was-validated" to the form, and we me must precise for all fields, whether it's good (add class is-valid) or not (add class is-invalid).
In our case, we do accept empty fields as valid. So we return some fields with class is-valid and because the fields are empty, bootstrap still shows the red outline, not the green, like this:
The form code is :
<form action="" method="post"
class="was-validated" novalidate>
<div class="row mb-3">
<label for="id_content2" class="col-sm-2 col-form-label">Content2</label>
<div class="col-sm-10">
<input type="text" name="content2" class="form-control is-valid"
required id="id_content2" aria-describedby="content2" />
<div class="valid-feedback"> Valid </div>
</div>
</div>
</form>
What am I doing wrong? What is the solution to consider some empty fields as valid?
It seems like that the "is-valid" is being added when the form is returned to the user but the field is empty. That would explain the behaviour at least...
One solution to consider an empty field as valid is to remove the "required" attribute from the input field and check if the field is empty on the server side before processing the form.
I want to declare some layout to use as template for all form fields.
So given roughly this fragment
<div th:fragment="control(input)" class="form-group">
<label class="col-sm-3 control-label">Edition description</label>
<div class="col-sm-9">
<input th:replace="${input}">
</div>
</div>
And this fragment "invocation"
<div th:replace=":: control(~{:: input})">
<!--Want to reference this one, not all inputs-->
<input th:field="*{editionDescription}" type="text" class="form-control" placeholder="перераб., дополн.">
</div>
It would produce the following result:
<div class="form-group">
<label class="col-sm-3 control-label">Edition description</label>
<div class="col-sm-9">
<input th:field="*{editionDescription}" type="text" class="form-control" placeholder="перераб., дополн.">
</div>
</div>
The problem is that :: input input selector is applied to all <input> tags in currently processed template. How do I reference only enclosed one?
Additionally, can you give an advice on how to approach this in general. I want to mimic Grails Fields plugin as much as possible. Do you think I'd better declare my own dialect?
You should be defining classes (or identifiers) to your input elements (the ones you want to replace) and then you can use the appropriate selector syntax just to select the desired input. You can find selector syntax details in here
Sample code might look like this:
<div th:fragment="control(input)" class="form-group">
<label class="col-sm-3 control-label">Edition description</label>
<div class="col-sm-9">
<input th:replace="${input}">
</div>
</div>
Then your selector should be like:
<div th:replace=":: control(~{:: input.description})">
<!--Want to reference this one, not all inputs-->
<input th:field="*{editionDescription}" type="text" class="form-control description" placeholder="перераб., дополн.">
</div>
Please note the use of :: input.description as a selector with class identifier
I have an angular 2 form that uses a PODO to store model values in.
It has a set of properties that accept integer values.
When i inspect that response that is posted to the web server, these values are coming back as floating point values.
Question:
Why is my integer accepts floating point assignments?
<div class="form-group">
<label for="card_number">Credit Card Number</label>
<input type="number" id="card_number" [(ng-model)]="dto.ccn" class="form-control" [required]="true"/>
</div>
<div class="form-group">
<label for="card_expiration">Expiration</label>
<input type="text" id="card_expiration" [(ng-model)]="dto.ccExpiration" class="form-control" [required]="true"/>
</div>
<div class="form-group">
<label for="card_ccv">CCV</label>
<input type="number" id="card_ccv" [(ng-model)]="dto.ccv" class="form-control" [required]="true"/>
</div>
JS doesn't distinguish between double/float and int and so can't Dart when compiled to JS.
See also https://www.dartlang.org/articles/numeric-computation/#considerations-when-dart-is-compiled-to-javascript
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
how to reproduce :
create new ASP.Net MVC project
add a model
add a controller with scaffolding views
open the Create.cshtml in browser , then change any "form-group" using firebug or developer tools :
From :
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
</div>
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>
To :
<div class="form-group">
<label class="control-label col-md-2" for="Title">Title2</label>
<div class="col-md-10">
<div class="input-group">
<input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
<span class="input-group-addon">#</span>
</div>
</div>
</div>
we just put "input" inside a "div" with "class='input-group'" and added an "input-group-addon"
the result is very weird , it looks like this :
http://i.imgur.com/ylpYJKh.png
but the correct result is this :
http://jsfiddle.net/6t3d9z8e/
is this a bug with ASP.Net MVC 5 default template or what ?
It's interesting bug in interaction between bootstrap css and microsoft default styles.
See in your default css file "Site.css" and remove block after comment Set width on the form input elements since they're 100% wide by default, where setting max-width property on inputs.
And if you want to limit your input by size you should do this by bootstrap's col-md-... classes.
By looking at your screenshots, it is very clear that MVC5 is overwriting the default bootstrap input properties.
Add the below CSS code to your style sheet. This will solve the problem.
.input-group .text-box { width: 100%; }