0
317
Viewscómo cambiar el color del borde seleccionado a rojo al hacer clic en el botón
Hola, tengo una pregunta interesante relacionada con la validación y los formularios, ya que decido usar mi propia clase, sin embargo, me doy cuenta de que cuando se hace clic en el botón, el color del borde ya no se muestra.
Intenté probar usando css para no válido y funcionó, así que ahora me gustaría que si el usuario presiona el botón, el estilo para el borde de selección sea rojo porque no es válido, ¿cómo puedo hacer eso aquí? Mi código a continuación
var myForm = document.getElementsByClassName('needs-validation'); var btn = document.querySelector("[type='submit']") btn.addEventListener("click", function() { if (myForm.checkValidity()) { ('.select-user-role').setCustomValidity('') } else { alert("no"); } }); // 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); .select-user-role:invalid { border-color: red; } <div class="form-group row"> <label for="validationRole" class="col-form-label role">*Role:</label> <div class="col-3 "> <select class="select-user-role custom-select-sm col-11" id="select-user-role" required> <option class="selectrole" selected disabled value="">Select ....</option> </select> <div style="margin-left: 10px;" class="invalid-feedback"> Enter a valid user role! </div> </div> </div> <button type="submit" class="btn-primary submitbutton">Add</button> Este es mi sitio web de cómo se ve cuando no es válido 
Lo que quiero es este mensaje de validación y el color del borde rojo emergente
2 answers
Answer question0
Puede usar Javascript para agregar una clase a la etiqueta de selección cuando el usuario no es válido.
Prueba lo siguiente
var myForm = document.getElementsByClassName('needs-validation'); var btn = document.querySelector("[type='submit']") var box = document.getElementsByClassName('select-user-role') btn.addEventListener("click", function() { if (myForm.checkValidity()) { box.classList.remove("error"); ('.select-user-role').setCustomValidity('') } else { box.classList.add("error"); alert("no"); } });Luego, para CSS, agregue
.select-user-role.error { border-color: red; }Incluso agregué eliminar, por lo que cuando el usuario seleccionado es válido, el borde rojo desaparece
0
no ha agregado una función checkValidity , así que hice algo temporal
Al hacer clic en el botón, si la validez es false , le dará al elemento user-role la clase invalid , si no, se eliminará
var myForm = document.getElementsByClassName('needs-validation'); var btn = document.querySelector("[type='submit']"); var userrole = document.querySelector('.select-user-role'); const checkValidity = () => { //your code return false; } btn.onclick = () => { if (checkValidity()) { userrole.classList.remove('invalid'); } else { userrole.classList.add('invalid'); } } .select-user-role.invalid { border-color: red; } <div class="form-group row"> <label for="validationRole" class="col-form-label role">*Role:</label> <div class="col-3 "> <select class="select-user-role custom-select-sm col-11" id="select-user-role" required> <option class="selectrole" selected disabled value="">Select ....</option> </select> <div style="margin-left: 10px;" class="invalid-feedback"> Enter a valid user role! </div> </div> </div> <button type="submit" class="btn-primary submitbutton">Add</button>