Estoy tratando de crear una validación para mi formulario ajax. Quiero hacer un borde rojo alrededor de la entrada cuando esté vacío cuando envíe el formulario.
Desafortunadamente, addClass() no funciona. La alerta aparece, pero eso es todo.
$(function() { $('#form').on('submit', function(e) { e.preventDefault(); if ($('.required').val() === '') { $('.required').addClass('error'); alert("error"); } $.ajax({ type: "post", url: 'php/php.php', data: new FormData(this), processData: false, contentType: false, success: function() { document.getElementById("text").innerHTML = "success"; document.getElementById("add").style.border = "2px solid green"; }, error: function() { document.getElementById("text").innerHTML = "error"; document.getElementById("add").style.border = "2px solid red"; } }); }); }); .error { border: solid 2px red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form id="form" method="POST" action="php/php.php"> Name: <input type="text" name="Name" id="name" class="required"><br> <input type="submit" name="Add" id="add"> </form>Revisé algunas otras publicaciones, pero aún no puedo resolver el problema.
Editar: parece que xampp tuvo algunos problemas al importar archivos CSS externos (o al menos actualizar los datos). El problema está resuelto.
¿Está utilizando jquery UI?, porque addClass es una función asíncrona en jquery ui y, por lo tanto, la declaración de alert en la siguiente línea se ejecuta primero, lo que bloquea el hilo principal.