Wizara

Bootstrap Form Validation: Custom SVG Background Images

Wizara makes form validation a breeze with the power of Bootstrap!

HTML5 form validation is effortlessly integrated into Wizara Forms. Whether you choose browser default behaviors or go for custom styles, you can provide valuable, actionable feedback to your users.

Bootstrap Field Validation CSS classes

The validation process is straightforward: HTML form validation is applied via CSS's :invalid and :valid pseudo-classes, targeting <input>, <select>, and <textarea> elements. Bootstrap conveniently scopes these styles to the parent .was-validated class, typically applied to the <form>. This enables you to activate validation after form submission, precisely when you need it.

To reset the form appearance dynamically (like after Ajax submissions), simply remove the .was-validated class from the <form>.

For server-side validation, use .is-invalid and .is-valid classes as fallbacks. They don't require the .was-validated parent class.

Note that while custom form validation styles and tooltips aren't currently accessible, Bootstrap provides default browser validation methods and allows for custom validity messages with JavaScript's setCustomValidity.

Custom SVGs

At Wizara, we believe that form validation should not only be functional but visually captivating too! That's why we've replaced the standard Bootstrap validation icons with our very own collection of custom SVG images. These 32 unique icons, each averaging less than 200 bytes, add a delightful touch to your form interactions. Try them out today and witness the magic of Wizara's form validation with our lightweight and eye-catching SVG icons.



Size: 309 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M16 14c-2 3-6 3-8 0l-1 1c2 3 7 4 10 0l-1-1zm-1-3c-2 0-2-3 0-3s2 3 0 3zm-6 0c-2 0-2-3 0-3s2 3 0 3zm3-7C2 4 1.5 20 12 20S22 4 12 4zm0-2c13 0 13 20 0 20S-1 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 309 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M16 17c-2-2-6-2-8 0l-1-1c2-3 8-3 10 0l-1 1zm-1-6c-2 0-2-3 0-3s2 3 0 3zm-6 0c-2 0-2-3 0-3s2 3 0 3zm3-7C2 4 1.5 20 12 20S22 4 12 4zm0-2c13 0 13 20 0 20S-1 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 244 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m17 8-5 10-4-2 1-2 2 1 4-8 2 1zm-5-4C2 4 1.5 20 12 20S22 4 12 4zm0-2c13 0 13 20 0 20S-1 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 244 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 6h2v8h-2V6zm0 10h2v2h-2v-2zm1-12C2 4 1.5 20 12 20S22 4 12 4zm0-2c13 0 13 20 0 20S-1 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 257 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m10 15 3-6c2-4 6-1 3 2l-6 6-2-1c-4-2 0-6 2-1zm10-3C20 2 4 2 4 12s16 10 16 0zm2 0c0 13-20 13-20 0s20-13 20 0z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 268 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M10 8c0-3 4-3 4 0l-1 6h-2l-1-6zm2 7c2 0 2 3 0 3s-2-3 0-3zm8-3C20 2 4 2 4 12s16 10 16 0zm2 0c0 13-20 13-20 0s20-13 20 0z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 264 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M17 8c2 2-3 8-5 10-1 1-7-3-5-5s3 1 4 3c1-4 4-10 6-8zm-5-6c14 0 14 20 0 20S-2 2 12 2zM3 12c0 11 18 11 18 0S3 1 3 12z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 264 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 6c4 0 1 8 0 8s-4-8 0-8zm0 12c-2 0-2-3 0-3s2 3 0 3zm0-16c14 0 14 20 0 20S-2 2 12 2zM3 12c0 11 18 11 18 0S3 1 3 12z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 258 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M2 2h20v20H2V2zm15 11c-1 5-9 5-10 0H5c1 8 13 8 14 0h-2zm-1-3c3 0 3-4 0-4s-3 4 0 4zm-8 0c3 0 3-4 0-4s-3 4 0 4z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 258 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M16 11c3 0 3-4 0-4s-3 4 0 4zm-8 0c3 0 3-4 0-4s-3 4 0 4zm8 7 2-1c-3-5-9-5-12 0l2 1c2-3 6-3 8 0zM2 2h20v20H2V2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 194 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m19 9-2-2-7 7-3-3-2 2 5 5 9-9zM3 3h18v18H3V3z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 216 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m5 7 5 5-5 5 2 2 5-5 5 5 2-2-5-5 5-5-2-2-5 5-5-5-2 2zM3 3h18v18H3V3z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 216 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M2 2h20v20H2V2zm17 6c1-2-3-4-4-2l-5 10c0-1-2-6-4-4s3 10 6 7l7-11z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 226 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M14 18c0-3-4-3-4 0s4 3 4 0zM10 5c-1 1 0 9 2 9s3-8 2-9-3-1-4 0zM2 2h20v20H2V2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 235 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M3 3v18h18V3H3zM2 2h20v20H2V2zm10 17c-3 3-8-5-6-7s4 2 5 4c1-2 4-15 8-11 3 3-5 12-7 14z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 240 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M10 6c1-2 3-2 4 0s0 8-2 8-3-6-2-8zM2 2h20v20H2V2zm1 1v18h18V3H3zm11 14c0 3-4 3-4 0s4-3 4 0z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 265 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2C-1 2-1 22 12 22S25 2 12 2zM6 13c3 4 9 4 12 0 0 7-12 7-12 0zm3-5c2 0 2 3 0 3S7 8 9 8zm6 0c2 0 2 3 0 3s-2-3 0-3z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 253 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2C-1 2-1 22 12 22S25 2 12 2zM9 8c2 0 2 3 0 3S7 8 9 8zm6 0c2 0 2 3 0 3s-2-3 0-3zm-8 8c3-3 7-3 10 0H7z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 213 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m18 7-6 12-6-3 1-2 4 2 5-10 2 1zm-6-5C-1 2-1 22 12 22S25 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 212 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 17h2v2h-2v-2zm0-12h2v9h-2V5zm1-3C-1 2-1 22 12 22S25 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 235 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M17 6c-4-2-6 6-6 10-1-2-3-6-5-4s5 7 6 6c2-2 9-10 5-12zm-5-4c13 0 13 20 0 20S-1 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 243 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2c13 0 13 20 0 20S-1 2 12 2zm0 2c-4 0-2 6-1 11h2c1-5 3-11-1-11zm0 13c-2 0-2 3 0 3s2-3 0-3z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 213 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2C-1 2-1 22 12 22S25 2 12 2zm-1 12 4-8 4 3-7 10-7-4 3-4 3 3z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 216 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2C-1 2-1 22 12 22S25 2 12 2zM9 5h6l-1 8h-4L9 5zm1 10h4v4h-4v-4z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 211 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m19 9-9 9-5-5 2-2 3 3 7-7 2 2zm-7-7C-1 2-1 22 12 22S25 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 233 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m6 8 2-2 4 4 4-4 2 2-4 4 4 4-2 2-4-4-4 4-2-2 4-4-4-4zm6-6C-1 2-1 22 12 22S25 2 12 2z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 178 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M20 8 10 18l-5-5 2-2 3 3 8-8z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 198 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'m5 7 5 5-5 5 2 2 5-5 5 5 2-2-5-5 5-5-2-2-5 5-5-5z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 205 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 20c-3 3-8-6-6-8s4 2 5 4c1-2 4-15 8-11 3 3-5 13-7 15z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 217 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M14 19c0 3-4 3-4 0s4-3 4 0zM10 4c1-2 3-2 4 0 2 3 0 11-2 11S8 7 10 4z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 243 bytes valid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M17 13c-1 5-9 5-10 0H5c1 8 13 8 14 0h-2zm-1-2c-3 0-3-4 0-4s3 4 0 4zm-8 0c-3 0-3-4 0-4s3 4 0 4z\'%3E%3C/path%3E%3C/svg%3E%0A')
Size: 245 bytes invalid
url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M16 11c-3 0-3-4 0-4s3 4 0 4zm-8 0c-3 0-3-4 0-4s3 4 0 4zm8 7c-2-3-6-3-8 0l-2-1c3-5 9-5 12 0l-2 1z\'%3E%3C/path%3E%3C/svg%3E%0A')