如何驗證 Materializecss 單選按鈕？

Question

我試圖實現驗證以在單選按鈕上顯示錯誤消息，但我無法成功。

我正在使用Materializecss框架。

驗證/顯示錯誤消息適用於文本框元素，而不適用於單選按鈕。

代碼：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="input-field col s6"> <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here"> <label for="m">M</label> </div> <div class="input-field col s6"> <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form>

為什么不顯示錯誤消息。 任何幫助，將不勝感激。 謝謝。

Answer 1

如果您可以使用 jQuery，您就可以實現基於這個 fiddle的解決方案。

通過將單選按鈕組放置在具有類radioRequired的容器 div 中：

<div class="col s12 radioRequired" name="mode" data-error="Error msg here">

JQuery 可用於檢查是否有任何選定的具有在容器中指定的名稱的單選按鈕。 如果沒有，突出顯示 div 並根據容器中的數據錯誤設置添加帶有類radioWarning和文本的錯誤消息。 如果已做出選擇，則刪除突出顯示和錯誤消息。

單選按鈕可以指定為：

  <input type="radio" name="mode" value="M" id="m">
  <label for="m">M</label>

最后，如果有radioWarning s，請阻止默認的 Submit 操作，否則照常允許。

Answer 2

我使用過這個框架，默認情況下與單選按鈕表單驗證無關。 我使用以下結構來向我的單選按鈕添加驗證。

在關閉 body 標簽之前，我添加了一個類名“radio”來輸入父項和腳本。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="radio input-field col s6"> <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here"> <label for="m">M</label> </div> <div class="radio input-field col s6"> <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form> <script> $('.radio lable, .radio input').click(function(){$(this).parent().siblings().removeClass('checked'); $(this).parent().addClass("checked")}); $("form button[type=submit]").click(function(e){ e.preventDefault(); $("form input:radio").each(function() { if ($(this).attr('required')){ if(!$(this).parent().hasClass('checked')){ //some code for when nothing is chosen console.log("nothing is chosen"); } else{ console.log("value of checked radio button is: "+$(this).val()); } } else { console.log("not required"); } }); }); </script>

我希望它能解決問題。

Answer 3

https://jqueryvalidation.org/使用這個插件。 jQuery 驗證。 它對我有用。 它有據可查且易於使用。

您放置一些規則，然后從該插件中調用驗證功能。

Answer 4

我正在為前端使用物化並驗證按鈕無線電使用 jquery.validate.js 並在更改行中

elementID = this.idOrName( elemnt ), for elementID = $( elemnt ).attr("id"),

並在這一行注釋this.addWrapper( errors ).hide();

Answer 5

對materialize.css的快速研究表明，該框架的樣式缺少用於radio類型的輸入的正確選擇器，請查看此圖像：

以下代碼包含:after標簽選擇器的樣式。 但是，為無線電輸入添加選擇器似乎並沒有解決我的問題。

要解決您的問題，您可以：

• 制作一個表單驗證器函數來檢查無線電值並提醒用戶，然后將此函數掛接到表單的onsubmit事件。
• 將驗證器函數附加到提交按鈕，這將人為地阻止按鈕被點擊和表單被提交。

這是一種更清潔的方法。

我猜這個框架的開發人員有意排除了單選按鈕驗證的代碼。 單選按鈕是一個常見的 UI 元素，它出現在單選按鈕組中。 單選按鈕的特定方式是一組中只能有一個選定的值，並且必須有一個選定的值。

因此，從這里更改您的 M 輸入：

<input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">

對此：

<input checked required class="validate" type="radio" name="mode" value="M" id="m">

• HTML5 不需要特定修飾符的值，例如required 、 disabled 、 selected所以我刪除了它。
• 刪除了未使用的data-error屬性。
• 我將修飾符移到更靠近開頭的位置，以便您一目了然。
• 我添加了一個checked修飾符，所以無線電組有一個默認值。

看來您正在制作性別選擇器。 只有兩種性別而且你總是有一個性別，沒有理由沒有默認值。 在 UI/UX 設計方面，單選按鈕組應該總是有一個選中的元素。 如果您願意，如果用戶不想提供此信息，您可以包含第三個選項。

這是您更新的片段：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="input-field col s6"> <input checked required class="validate" type="radio" name="mode" value="M" id="m"> <label for="m">M</label> </div> <div class="input-field col s6"> <input required class="validate" type="radio" name="mode" value="F" id="f"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form>