The form required the user to input phone number if its not employee, I have done this part. How to make the validation error appear on select value change? For example if the user pick employee, the form will not show "phone number is required" but if the user changed the select option to support, the form will show "phone number required" without pressing the submit button?
Here the code snippet:
<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>