在单选按钮周围显示错误

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类永远不会应用到单选按钮组。

来源

2017-09-01 Connie DeCinko

JS在哪里指定验证规则？（希望看起来像[此示例]（https://jqueryvalidation.org/required-method/#example:-makes-the-gender-radio-buttons-必需）） – Nick

@heybignick我添加了验证脚本。 –

我在我的项目中试过你的代码。它的工作完美。 –

我转载这是默认你this CodePen有错误...

通过jQuery验证产生的错误信息是无效的元素之后positionned ...。

现在您可以在其他地方使用errorPlacement来定位该错误消息。

在这Solution，我刚刚放在父母.input-group后。我相信这就是你寻找的难题。
;）

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

编辑

有了完整的代码，更易于工作...
;）

一个button的一个默认行为要提交form（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

来源

2017-09-01 06:07:07

仍然没有好处。然而，我可能发现了一个问题。你的按钮是一个通用的标签，你的示例工作。但是，只要我添加type =“button”，您的示例就停止工作。很明显，表单没有提交，因此不会触发验证。也许是什么？ –

这支笔的工作原理几乎...现在它不显示文本字段的错误文本。 https://codepen.io/SBACDeCinko/pen/qXgpXa当我将其复制到我的整个页面并且仍然失败时，仍然有些东西仍然关闭。 –

修改了代码，因为它没有显示文本字段的消息。 https://codepen.io/SBACDeCinko/pen/qXgpXa但是，当我将其复制到我的整个页面时，仍然有一些内容仍然失效。它闻起来像是一场冲突，但我没有找到任何东西。 –

好的，固定它。感谢您提供错误消息的位置帮助。那不是我最初的问题，但是一旦我得到显示的错误，它就出现了。你的修复效果很好。

我的主要问题是与一些样式的CSS冲突，将单选按钮变成了非常棒的字体图标。隐藏默认单选按钮的小片段导致验证失败，因为它只能查找可见的字段。我将高度设置为零，目前为止似乎工作。

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

来源

2017-09-05 15:14:17

在单选按钮周围显示错误

回答

相关问题