El formulario requería que el usuario ingresara el número de teléfono si no es un empleado, he hecho esta parte. ¿Cómo hacer que aparezca el error de validación en el cambio de valor seleccionado? Por ejemplo, si el usuario elige a un empleado, el formulario no mostrará "se requiere un número de teléfono", pero si el usuario cambió la opción de selección a soporte, el formulario mostrará "se requiere un número de teléfono" sin presionar el botón de enviar.
Aquí el fragmento de código:
<body> <div class="main-block"> <form method="POST" id="new_form"> <h1>Contact Us</h1> <div class="info"> <select name="usertype" id="user_type"> <option value="" disabled selected>User Type</option> <option value="Employee">Employee</option> <option value="Customer">Customer</option> <option value="Support">Support</option> </select> </div> <input id="fname" type="text" name="name" placeholder="Full name" /> <input id="email" type="text" name="email" placeholder="Email" /> <input id="phone_number" type="text" name="phoneNumber" placeholder="Phone number" /> <button id="submit_button" type="submit">Submit</button> </form> </div> </body> <script> $(function () { $("#new_form").validate({ rules: { usertype: "required", name: "required", phoneNumber: { required: function () { if ($("#user_type").val() == "Employee") { return false; } else { return true; } }, }, email: { required: true, email: true, }, }, messages: { usertype: "User Type is required", name: "Name is required", email: { required: "Email is required", email: "Your email address must be in the format of name@domain.com", }, phoneNumber: "Phone number is required", }, }); $("#new_form").on("submit", function (e) { var data = $("#new_form :input").serializeArray(); console.log(data); }); }); </script>