Solución:
Primero resolví mi problema con una biblioteca externa como sugirió Jonathan Dion. Pero recientemente me encontré con esto:
Bootstrap v4.0 introdujo su propia validación de formulario que aún puede emparejar con la validación de backend php. Del Doc:
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Doesn't look good!
</div>
</div>
</div>
</div>
Luego usando JS:
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Esto proporciona coloración del borde de entrada y muestra los bloques de retroalimentación válidos / no válidos de acuerdo con el patrón o las propiedades dados. Se aplica a través de las dos pseudoclases de CSS, :invalid
y :valid
. Se aplica a <input>
, <select>
, y <textarea>
elementos.
Actualización 2020 – Bootstrap 4.4.x
Aquí hay otra opción (JS moderno) si desea validar cada entrada una a la vez (En Vivo o tiempo real) en lugar de esperar a que se envíe el formulario completo …
(function() {
'use strict';
window.addEventListener('load', function() {
// fetch all the forms we want to apply custom style
var inputs = document.getElementsByClassName('form-control')
// loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}
else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})()
<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
<div class="form-group">
<label class="form-control-label" for="input1">Enter some input</label>
<input type="text" class="form-control" name="input1" id="input1"
autocomplete="no" required>
<div class="valid-feedback">Success! You've done it.</div>
<div class="invalid-feedback">No, you missed this one.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="input2">Enter password</label>
<input type="text" class="form-control"
pattern="^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}$"
autocomplete="no" name="input2" id="input2">
<div class="valid-feedback">Nice! You got this one!</div>
<div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
</div>
<div>
<button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
</div>
</form>
https://codeply.com/p/mzBNbAlOvQ
Puede utilizar cualquier biblioteca disponible en la web. Puede probar jqueryvalidation. Es bastante fácil de usar, solo lea la documentación.
Añade el required
atributo en tu input
y jqueryvalidation hará el trabajo. Para diseñar, puede agregar su propio CSS y hacer que parezca bootstrap.
Espera que ayude
$(document).ready(function(){
$('#contact_form').validate()
})
Manifestación