检查是否已有"有效" jQuery.validate()上的元素类

时间:2018-01-18 02:56:53

标签: javascript php jquery ajax wordpress

我有两个"< li>"元素和我添加"活跃"使用jQuery点击类,但是,我不希望用户继续而不选择任何两个选项。以下是我使用的元素:

<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>

我想知道如何使用jQuery.validate验证这一点?

我目前修复此问题是禁用按钮验证,直到用户没有点击我提供的选项。但我发现如果对用户体验感到恼火。因此,如果他们没有选择任何选项,我想要显示错误。

1 个答案:

答案 0 :(得分:0)

所以我找到了解决问题的方法,我发布了它,所以如果有人需要解决方案,这是我修复的。

新的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>

所以,我添加了一个带有空值的隐藏输入框,以便稍后在jQuery Validate上检查它是否为空并显示我提供的标签错误。

这是jQuery.validate()代码。

jQuery('#form').validate({
    ignore: ".ignore",
    rules: {
        last_name: {
            required: true
        }
    },
    messages: {
         accountType: {
              required: "<?php _e( 'Please choose account type', 'themesdojo' ); ?>"
    }
    }).......;

对于最终结果,当我点击两个选项之一时,我使用了jQuery,我在我提供的隐藏文本框中添加了一个值,以便正确验证:)