bootstrap-validator
bootstrap-validator copied to clipboard
1000hz
Please Update this to Bootstrap 4+
I have been looking everywhere for a boostrap validator that is even close to this one and sadly this is the only one I like. It is very simple, easy to use and sadly I would like to start using Bootstrap 4+ with all my new projects and don't wish to revert back to Bootstrap 3. I really hope @1000hz decides to pick up again and add support for Boostrap 4+. Is there anyone here who has managed to fork and port this project over to support Bootstrap 4+? +1
I'm not a javascript guru, but only altering a bit the code of the Bootstrap 4 documentation https://getbootstrap.com/docs/4.0/components/forms/#custom-styles i got a similar behavior:
<form class="needs-validation" novalidate method="POST" action="" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email" value="" required autofocus>
<div class="invalid-feedback"></div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.scrollTo.min.js"></script>
<script type="text/javascript">
(function($) {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
var errorElements = $(form).find('.form-control:invalid, .custom-control-input:invalid');
$.each(errorElements, function(index, element) {
$(element).siblings('.invalid-feedback').html( $(element)[0].validationMessage );
});
$.scrollTo($(errorElements[0]), {offset: {top: -40}});
}
form.classList.add('was-validated');
}, false);
});
var elements = document.querySelectorAll('.form-control, .custom-control-input');
$.each(elements, function(index, element) {
if (element.willValidate === true) {
$(element).keyup(function() {
if (element.checkValidity() === true) {
$(element).removeClass('is-invalid').addClass('is-valid');
} else {
$(element).removeClass('is-valid').addClass('is-invalid');
$(element).siblings('.invalid-feedback').html( $(element)[0].validationMessage );
}
});
}
});
}, false);
}(jQuery));
</script>
I would be grateful if someone more experienced than me wanted to help me optimize this code ..
I encountered this issue while upgrading my codebase to Bootstrap 4, I ended up with this very quick hack that seems to work for me:
https://github.com/simias/bootstrap-validator/commit/eed3cc5d6a4c48651286d026114fc3c768d4d8ea
Keep in mind that I only have a relatively basic usage of this library and I haven't extensively tested it, so I wouldn't be surprised if some of the functionality was still broken.
