在单选按钮周围显示错误

Posted 2023-05-09

【中文标题】在单选按钮周围显示错误

【英文标题】：Show error around radio buttons

【发布时间】：2018-02-10 02:11:12

【问题描述】：

Jquery Validation 插件文档说您可以验证是否至少选择了一个单选按钮。但是，当尝试使用一些额外的布局时，我没有得到突出显示的错误。

我的代码如下所示。

<div class="form-group" style="margin-top:25px;">
    <label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-envelope"></i>
        </span>
        <div class="form-control" style="height:auto;">
            <div class="radio">
                <label class="noBold-text" style="font-size: 1em">
                    <input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email
                    <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                </label>
            </div>
            <div class="radio">
                <label class="noBold-text" style="font-size: 1em">
                    <input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone
                    <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                </label>
            </div>
        </div>
    </div>
</div>

$("#forgotPasswordForm").validate(
    rules: 
        fpUsername: 
            required: true,
            minlength: 3
        ,
        factorSelect: 
            required: true
        
    ,
    messages: 
        fpUsername: 
            required: "Please enter your username or email",
            minlength: "Your username must be at least 0 characters"
        ,
        factorSelect: 
            required: "You must select a recovery method"
        ,
    ,
    highlight: function (element, errorClass, validClass) 
        $(element).parents(".form-group").addClass("has-error").removeClass("has-success");
    ,
    unhighlight: function (element, errorClass, validClass) 
        $(element).parents(".form-group").addClass("has-success").removeClass("has-error");
    ,
);

has-error 类永远不会应用于单选按钮组。

【问题讨论】：

JS在哪里指定验证规则？ （希望看起来像 this example）

@heybignick 我添加了验证脚本。

我在我的项目中尝试了你的代码。它运行良好。

@Mr.Gandhi 我很困惑它是如何为你工作的。您看到红色的单选按钮及其下方的错误消息？

是的..错误消息以红色字体显示。

【参考方案1】：

我在this CodePen中重现了您遇到的错误...

jQuery Validate 产生的错误信息被定位在无效元素之后...这是默认值。

现在您可以使用 errorPlacement 将该错误消息定位到其他位置。

在这个Solution 中，我只是将它放在父.input-group 之后。我确定这就是您要寻找的拼图。 ;)

errorPlacement: function(errorLabel, invalidElement)
  if( $(invalidElement).is("[type='radio']") )
    var inputGroup = $(invalidElement).closest(".input-group");
    inputGroup.after(errorLabel);
  
,

---

编辑

使用您的完整代码，这更容易工作... ;)

form 中的button 的默认行为是提交（Reference，参见“类型”）。 因此，如果 type 被省略，它就是这样做的。

并且.validate() 函数不是由button type="button" 触发的。

所以... 您必须阻止默认的 submit 才能首先进行验证。 然后，如果表单有效，则提交。

这是通过.preventDault()和submitHandler实现的

$("#forgotPasswordForm").on("submit",function(e)
  e.preventDefault(); // Prevents the default form submit (Have to validate first!)
)
  .validate(

    // Skipping some lines here...

    submitHandler: function(form) 
    form.submit();  // Submits only if the form is valid
  
);

Updated CodePen

【讨论】：

还是不行。然而，我可能发现了一个问题。您的按钮是通用标签，您的示例有效。但是，只要我添加 type="button"，您的示例就会停止工作。显然表单没有提交，所以没有触发验证。也许是什么？

这支笔几乎可以使用...现在它不显示文本字段的错误文本。 codepen.io/SBACDeCinko/pen/qXgpXa 当我把它复制到我的整页时，有些东西仍然存在问题，但它仍然失败。

修改了您的代码，因为它没有显示文本字段的消息。 codepen.io/SBACDeCinko/pen/qXgpXa 但是当我将它复制到我的整页时，有些东西仍然存在问题，但它仍然失败。闻起来像是冲突，但我什么也没找到。

【参考方案2】：

好的，解决了。感谢您在上面放置错误消息方面的帮助。这不是我最初的问题，但是一旦我完全显示错误就会出现。您的修复效果很好。

我的主要问题原来是 CSS 与某些将单选按钮变成漂亮字体的图标的样式冲突。隐藏默认单选按钮的小 sn-p 会导致验证失败，因为它必须只查找可见字段。我将高度设置为零，到目前为止它似乎工作。

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] 
    /*display: none;*/
    height:0;