After downloading a bootstrap theme for my website, I noticed an elegant validation feature for required fields. When a field is left empty, a red exclamation mark appears behind the input, and hovering over it reveals the error message inside the field.
The HTML structure looks like this:
<div class="wrap-input100 validate-input m-b-10" data-validate = "Username is required">
<input class="input100" type="text" name="username" placeholder="Username">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
The associated CSS code is:
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
/* other CSS properties */
visibility: hidden;
opacity: 0;
/* transition effects */
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
And here is the JQuery function included:
(function ($) {
"use strict";
// Validate function to check input fields
})(jQuery);
I'm looking to expand this validation system to cover various scenarios such as character limits for usernames or specific requirements for passwords. However, duplicating the same HTML, CSS, and jQuery code with minor modifications seems inefficient. Could you guide me on how to approach this challenge effectively?
Appreciate any help or suggestions!