在單選按鈕周圍顯示錯誤

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

在單選按鈕周圍顯示錯誤

回答

相關問題