¿Cómo puedo agregar la clase de "error" a los conjuntos de campos también si sus entradas tienen una clase de "error"?
Estoy tratando de lograr esto de la siguiente manera, pero estoy agregando la clase de "error" a cada conjunto de campos, sin importar si la entrada tiene la clase de "error" o no.
$('#submit').click(function(e) { e.preventDefault(); $('input').each(function() { if($(this).hasClass("error")){ $("fieldset").addClass("error"); } }); }); <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="form-holder"> <fieldset> <legend>First name</legend> <input type="text" class="form-control" name="firstname" placeholder="First name" required> </fieldset> </div> <div class="form-holder"> <fieldset> <legend>Last name</legend> <input type="text" class="form-control error" name="lastname" placeholder="Last name" required> </fieldset> </div> <div class="form-holder"> <fieldset> <legend>Email</legend> <input type="email" class="form-control error" name="email" placeholder="Email" required> </fieldset> </div> <input type="submit" id="submit" value="Send">El código está haciendo lo que le estás diciendo. Cuando dices $("fieldset").addClass("error"); significa agregar la clase de error a todos los elementos del conjunto de campos.
Lo que debe hacer es encontrar el conjunto de campos que es el padre de la entrada que tiene la clase de error. En tu ejemplo esto sería:
$('#submit').click(function(e) { e.preventDefault(); $('input').each(function() { if($(this).hasClass("error")){ $(this).closest("fieldset").addClass("error"); } }); }); El método closest() viajará por el DOM en busca del primer elemento que coincida con el selector. Por lo tanto, debería encontrar el padre del conjunto de campos más cercano a la entrada.
Intente apuntar al conjunto de fieldset principal explícitamente mediante el parent . (Y también almacene en caché jQuery'd this var.)
$('#submit').click(function(e) { e.preventDefault(); $('input').each(function() { var $this = $(this); if ($this.hasClass("error")) { $this.parent("fieldset").addClass("error"); } }); }); <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="form-holder"> <fieldset> <legend>First name</legend> <input type="text" class="form-control" name="firstname" placeholder="First name" required> </fieldset> </div> <div class="form-holder"> <fieldset> <legend>Last name</legend> <input type="text" class="form-control error" name="lastname" placeholder="Last name" required> </fieldset> </div> <div class="form-holder"> <fieldset> <legend>Email</legend> <input type="email" class="form-control error" name="email" placeholder="Email" required> </fieldset> </div> <input type="submit" id="submit" value="Send">