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