I'm trying to activate validation by Bootstrap and I've pasted in the follownig sample on my page.

This demo shows how to integrate JQuery-validation and the Bootstrap framework. Bootstrap home project. Confirm password. Please agree to our policy Sign up. Using feedback icons. I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's doc for Custom Styles to handle those with accessibility issues that use sc. Stack Overflow. Log In Sign Up; current community. Post a new question with the code example.

Bootstrap validator.js example, bootstrap form validation example demo, jquery validation in php demo, laravel bootstrap validation, bootstrap php form validation example, javascript form validation bootstrap.

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.

Trying to googlearch the issue, I only arrive at examples linking to the official site from where I've got my sample, so there is rather little to help me there. I have a fiddle illustrating the issue.

What can I do about it? What am I missing?

2 Answers

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...

Update 2018 - Bootstrap 4.0.0
Form Validation Example Demo

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...

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:

Bootstrap Form Validation Js

1. When validated, the form adds a class named was-validated.
2. Feedback messages are wrapped within .valid-feedback or .invalid-feedback.

For server-side validation:

1. No need for was-validated class on the <form> tag.
2. Add .is-valid or .is-invalid on the input control.
3. Add .invalid-feedback or .valid-feedback for the feedback message.

Bootstrap 3 Form Validation