Demo MVC Application - Bootstrap 3

Application form with client side validation

This is a demo of some basic form elements built in MVC’s razor view engine. Obviously this isn’t an MVC site I’m hosting here, but rather a static copy of what my demo site generates. This site uses Bootstrap 3 for styling, and jQuery validate for client side validation, which I have customised to use with Bootstrap classes.

Application questions

Information!

This is an information message. I have a script that can hide and show this depending on what value is selected above. It works in a similar way to the jQuery validation plugin using the data attributes on the element. Once I have made some more improvements to it I will put it on Github.

Radio buttons for string
These questions are a group
Example input to help user
I don't want to use a legend because I want my radio button group to have a label that matches the labels of the other elements. This is a div with a role of group which should still be accessible.

Warning!

Warning message to user, the selection you just made has triggered this extra thing for you to read.

Success!

This is that success looks like. While you are reading this, the check boxes below are a group, and I have custom validation so that at least one of them must be selected. If you select 'other' then the details text area also becomes a mandatory field.

Select other to enter more details.

Including things like thing 1.

Not quite like thing 1.
Cancel