简体   繁体   English

检查jQuery.validate()的元素上是否已经有一个“活动”类

[英]Check if there's already an “active” class on element on jQuery.validate()

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. 我有两个“ <li>”元素,并且在使用jQuery单击时添加了一个“活动”类,但是,我不希望用户在未选择两个选项中的任何一个的情况下继续进行操作。 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? 我想知道如何使用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: 新的HTML结构:

<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. 因此,我添加了一个带有空白值的隐藏输入框,以便稍后在jQuery Validate上可以检查其是否为空并显示我提供的标签错误。

Here is the jQuery.validate() code. 这是jQuery.validate()代码。

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 :) 对于最终结果,当单击两个选项之一时,我使用了jQuery,我在为它提供的隐藏文本框中添加了一个值,以供其正确验证:)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM