使用 jquery 验证 Funky Radio CSS 按钮

Question

我正在使用 jquery 验证插件来验证我的表单。我得到它验证我的输入并选择没有问题。但是，我正在使用一些自定义的精美单选按钮，来自这里：https://bootsnipp.com/snippets/featured/funky-radio-buttons

现在，我在每个单选按钮中添加了“必需”，并在 validate 方法中指定了“必需”。它似乎在为空时阻止提交。但我无法让它在单选按钮附近显示自定义错误消息。我看到花哨的单选按钮通过隐藏常规单选按钮来工作。我想知道这是否与错误消息的显示有关。

HTML：

<div class="funkyradio">
    <div class="funkyradio-red red">
    <input type="radio" name="track" id="radio1" value="neutral" required />
    <label for="radio1">$5.50 for Neutral</label>
    </div>
    <div class="funkyradio-yellow yellow">
        <input type="radio" name="track" id="radio2" value="2-wheel" required />
        <label for="radio2">$16 for 2 Wheel Drive</label>
    </div>
    <div class="funkyradio-green green">
        <input type="radio" name="track" id="radio3" value="4-wheel" required />
        <label for="radio3">$26.50 for 4 Wheel Drive</label>
    </div>
</div>

jquery:

$("#form").validate({
    rules: {
        email: {
          required: true,
          email: true,
          track: true
        },
        referralID: {
            required: false,
            digits: true
        },
        phone: {
            require_from_group: [1, ".contact-group"]
        },
        email: {
          require_from_group: [1, ".contact-group"]
        }
    },
    messages: {
        phone: {
            require_from_group: "'Phone Number' or 'Email' is required"
        },
        email: {
            require_from_group: "'Phone Number' or 'Email' is required"
        },
        track: "Please select a neutral, 2 wheel drive, or 4 wheel drive."

    }
});

这是让我担心的 CSS：

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
   display: none;
}

更新 根据要求，我正在使用这个 jquery 插件进行验证：https://jqueryvalidation.org/

Answer 1

您的代码应进行如下调整：

$("#form").validate({
    rules: {
        email: {
          required: true,
          email: true,
          require_from_group: [1, ".contact-group"]
        },
        referralID: {
            required: false,
            digits: true
        },
        phone: {
            require_from_group: [1, ".contact-group"]
        },
        track: {
            required: true,
            require_from_group: [1, ".contact-group"]
        }
    },
    messages: {
        phone: {
            require_from_group: "'Phone Number' or 'Email' is required"
        },
        email: {
            require_from_group: "'Phone Number' or 'Email' is required"
        },
        track: "Please select a neutral, 2 wheel drive, or 4 wheel drive."

    }
});

编辑：

变化：

track: "Please select a neutral, 2 wheel drive, or 4 wheel drive."

到

track: {
        require_from_group: "Please select a neutral, 2 wheel drive, or 4 wheel drive."
    }