Question

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

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

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."
    }

使用jquery验证Funky Radio CSS按钮

1 个答案: