I'm trying to implement validation by Bootstrap and I've pasted the following sample on my page:
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) but it still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.
What can I do about it? What am I missing?
Bootstrap 5 (Update 2021)
Since jQuery is no longer required for Bootstrap 5, it's easy to do client-side validation with vanilla JavaScript. The docs include a generic code example that should work on all forms with needs-validation..
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Bootstrap 5 Form Validation Demo
Bootstrap 4 (Original Answer)
Validation has changed as of the Bootstrap 4 beta release.
The valid state selectors use the was-validated class which would be added dynamically after validating the form via client-side JavaScript. For example...
<form class="container was-validated" novalidate="">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" name="i1" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputSuccess2">Input with danger</label>
<input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
<div class="invalid-feedback">That didn't work.</div>
</div>
<div class="">
<button type="submit" class="btn btn-secondary">Text</button>
</div>
</form>
https://codeply.com/go/45rU7UOhFo
Form Validation Example Demo - Bootstrap 4.0.0
As explained in the docs, if you intend to use server-side validation you can simply set the is-valid or is-invalid classes on the form-controls...
<form class="container">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</form>
It appears the validation changes again in the final release version of Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation.
It becomes more complicated than I thought.
Custom style client side validation is recommended:
When validated, the form adds a class named was-validated.
Feedback messages are wrapped within .valid-feedback or .invalid-feedback.
For server-side validation:
No need for was-validated class on the <form> tag.
Add .is-valid or .is-invalid on the input control.
Add .invalid-feedback or .valid-feedback for the feedback message.
my simple way....
<input type="text" class="form-control" id="unombre"
placeholder="su nombre" name="vnombre" required
onblur="valida(this.id)">
<script>
function valida(v) {
var dato = document.getElementById(v).value
document.getElementById(v).className +=' is-valid';
}
</script>
Related
So i'm getting this error on my mvc project while working on my form.
The error indicates that I haven't closed the form tag properly.
However, as you'll see below, I have closed it properly.
<form method="post">
//form content below
</form>
I have added taghelpers in my ViewImports.cshtml file as you can see below.
#using ServiceWebsite
#using ServiceWebsite.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
May you have an unclosed quotation.
The same problem happened to me because I haven't closed " in readonly="readonly
<form class="form customized-bg-color" asp-action="Create" method="post">
<div class="col-lg-3 ">
<input type="text" class="form-control " id="Total" readonly="readonly />
</div>
</form>
I was facing the same problem but I have solve it with the following :
Either using pure html form
Or inject Helper tags into the form like so
#using (Html.BeginForm("Login", "Main", FormMethod.Post))
{
<form>
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#if (#ViewBag.Message != null)
{
<div style="border: 1px solid red">
#ViewBag.Message
</div>
}
<div class="mb-3">
<label class="form-label">#Html.LabelFor(UserBindingModel => UserBindingModel.UserName) </label>
</div>
}
Save it and it will disappear.
I used this website as a reference.
Another example of functional form:
#model UserBindingModel
#{
ViewBag.Title = "Login";
}
<form asp-action="Login">
<div class="mb-3">
<label asp-for="UserName" class="form-label"></label>
<input type="text" class="form-control" asp-for="UserName">
</div>
<div class="mb-3">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control">
</div>
</form>
I think you should check the href attribute of Your stylesheets and images.
I also hit this "error", VS 2022 .Net 6 project, also with a well-formed, uh, form :) I removed the form tag & closing tag, rebuilt the project, then added them back in. Built just fine, issue did not reoccur. Depending on what you are trying to to, I'd try that before doing any major code changes...
the Form tag and its closing SHOULD be IN its container if it has one, I had the same problem.
your form tag should Not be Like this
<div>
<form>
</div>
</form>
Correct:
<div>
<form>
</form>
</div>
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
I am working on a angular2 App and I am using primeng for UI elements. I have dropdowns where I am using the options in these dropdowns are dynamically generated from an API call. Now, when I click the submit button, I want it to validate the forms before submitting. So I am using 'required="required"' in order to make the validation happen.
I see that, if the data is not loaded into the dropdowns, the validation works fine, but when the data is loaded and dropdown options are populated, the primeng validation breaks and it does not throw any message.
Here's my html code..
<div method="post" class="content-form">
<div class="col-lg-6">
<form #myForm="ngForm" class="form-horizontal" novalidate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">System of Origin</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="systemOfOrigins" [(ngModel)]="defaultSoO" [ngModelOptions]="{standalone: true}" required="required" filter="filter" placeholder="NONE"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Content Type</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="contentTypes" [(ngModel)]="selectedContentType" [ngModelOptions]="{standalone: true}" filter="filter" required="required" placeholder="Choose"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Rendition</label>
<div class="col-sm-10">
<p-dropdown id ="rendition" placeholder="Select Rendition" class="contentDetails" [options]="renditions" [(ngModel)]="renditionSelected" [ngModelOptions]="{standalone: true}" filter="filter" required="required"></p-dropdown>
</div>
</div>
</form>
Am I not using the required attribute properly or is there any other way to do it with API calls ?
Help is appreciated
This issue happens if there is a dummy first element in the options array that is used to display please select text, and the label in that dummy element is having some value in it. So just set the label value as '' or null or undefined. It will work.
Try
<p-dropdown [required]="true">
required is a boolean property. If you are setting it dynamically, [required]="isRequired", otherwise required="true" should do it for you.
Try replacing required="required" with required="true" and seeing if that makes them required. If not, I suggest adding a plunkr
jsfiddle demo: https://jsfiddle.net/zpufky7u/1/
I have many forms on the site, which was working fine, but just suddenly angular is binding all the forms with class="ng-pristine ng-valid"
Is this a setting or what can cause angular to auto-bind forms?
I'm using angular version: angular#1.4.7
Following is my form, as you can see there is no model inside form
<form name="app_bundle_notification_type" method="post">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<div class="checkbox">
<label class="required">
<input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
Yes, I would like to receive email newsletter for new deals, coupons and news.
</label>
</div>
</div>
</div>
</div>
<div class="row m-y-1">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
<input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>
Angular app.js
define(['angular'], function() {
var app = angular.module("myApp", []);
app.init = function () {
angular.bootstrap(document, [app.name]);
};
return app;
});
So far I found the issue, if you do angular.bootstrap(document, [app.name]); then it is binding the form. it was not causing this issue before.
Presuming you are using a form tag around your form, Angular automatically adds those classes to each ng-model inside your form.
This allows you much more control over the elements inside your form to perform any validation or logic you want your form to capture or enforce before submitting.
Much of it is listed in the docs here
https://docs.angularjs.org/api/ng/directive/form
For this reason, Angular prevents the default action (form submission
to the server) unless the <form> element has an action attribute
specified.
New version accepts empty action="", check release version at https://github.com/angular/angular.js/pull/3776
I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?
Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});