keyboardForms

Validation indicators

Just include a <span class="counter-invalid-fields"></span> inside a form and you have the number of invalid fields. The same goes with <span class="counter-valid-fields"></span>.

You can also add the class form-valid and form-invalid to any element inside a form and it will be shown only when the form is valid or invalid.

Try it yourself:

Required field

Required select Teste 1 Teste 2 Teste 3

Number between 5 and 9

checkSubmit warningSubmit

checkSubmit

Invalid fields:

Valid fields:

Ready to submit!

Has validation errors!

Browser support

At the moment of writing, Internet Explorer and Edge doesn't support the :valid pseudoclass on the form tag. You can use the classes form-valid-supported and form-valid-unsupported to show or hide an element based on browser support of this feature.

---

Auto required hints

We can auto-add asterisks ( * ) to the label of required fields! Here's how to do this:

1. add a mark-required class to your form;
2. add a <div class="input"> wrapping your label and your input
3. put the input before the label

<form class="mark-required">

  <div class="input">

    <input required>

    <label>My required label</label>

  </div>

</form>

Why would you ever do this?

• Once you get used to it, it becomes less weird;
• You won't need to put that * on every label. No more "little mistakes";
• If you use JS to toggle the input's required on or off, you don't need to worry about this label. It auto adjusts!

Finally, here's the demo:

My required label

---

Checkbox and Radio

Do you know somebody who uses JS to build nice checkboxes and radios?
You don't need any extra markup or class, just use them!

By the way, this is how our fieldset looks :)

---

Textarea resize

You have four classes to control the resizing of textareas:

---

File input

You can have nice file inputs too. Just create a label with a button class, and put the input inside it.

In Chrome the default file input button is hidden, but in other browsers there's still no way to do this. However, you can add the class hidden to you input, so only the external button will be visible, but the file name will be hidden too as it is part of the input itself.

Be sure to check the example bellow in Chrome and other browsers to be sure which one you wanna choose.

---

Regular inputs

As expected, you can simply use your inputs, selects and textareas and they will look fine. No extra classes needed: