I have two "< li >" elements and I'm adding an "active" class on click using jQuery, however, I don't want user to proceed without picking any of the two options. Here is the element I'm using:
<ul class="register-tabs">
<li class="am_va" data-account-type="one" data-description="one"><a href="javascript:void(0);">One</a></li>
<li class="need_va" data-account-type="two" data-description="two"><a href="javascript:void(0);">Two</a></li>
</ul>
I want to know how I can validate this using jQuery.validate?
My current fixed for this is the button validate is disabled until user is not clicking on the options I provided. But I found if irritating on user experience. So I want to show an error instead if they didn't choose any of the options.
So I found a solution for my problem and I'm posting it so if someone needs a solutions this is my fixed.
New HTML Structure:
<ul class="register-tabs">
<li class="am_va" data-account-type="job-seeker" data-description="I'm a virtual assistant looking for work."><a href="javascript:void(0);">I WANT TO WORK</a></li>
<li class="need_va" data-account-type="job-offer" data-description="I need to hire a virtual assistant."><a href="javascript:void(0);">I WANT TO HIRE</a></li>
<input type="hidden" name="accountType" id="accountType" value="" />
<label for="accountType" class="error"></label>
</ul>
So, I've added a hidden input box with a blank value so later on the jQuery Validate can check if it's blank and show the label error I provided.
Here is the jQuery.validate() code.
jQuery('#form').validate({
ignore: ".ignore",
rules: {
last_name: {
required: true
}
},
messages: {
accountType: {
required: "<?php _e( 'Please choose account type', 'themesdojo' ); ?>"
}
}).......;
For the final result, I used jQuery when one of the two options is clicked, I'm adding a value on the hidden textbox I provided for it to validate properly :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.