驗證單選按鈕，並選擇具有Materialise框架的下拉列表

- 更新：感謝pandamakes我有一個選擇下拉的解決方案。仍在尋找單選按鈕的解決方案。提前謝謝你 -驗證單選按鈕，並選擇具有Materialise框架的下拉列表

所以我想做一個單選按鈕，並選擇所需。當不包括Materialise js時，它可以正常工作，如下所示： https://jsfiddle.net/foch6otj/1/

不幸的是，這似乎與Materialize不兼容，並且驗證警報停止顯示，實際上select完全消失。但是，我找到了一個解決方法，既顯示select和alert（代碼的$（「select」）。material_select（）部分），但警報位置不正確。出於某種原因，它不會在這個代碼片段，但我的本地MAMP服務器上顯示它出現在這個形象： screenshot

我想保持Materialise的造型如果可能的話，我知道我可以使用其他方法以驗證領域，但作爲我的表格上的其他10個領域驗證得很好，我喜歡物化風格，我很樂意以同樣的方式進行這項工作。如果有人知道如何解決這兩個問題，我會非常感激。還要感謝所有在本網站上回答問題的人，您在幫助我在10多年以來第一次建立網站方面非常有幫助。

$(document).ready(function() { 
 
    $("select").material_select(); 
 

 
    $("select[required]").css({position: "absolute", display: "inline", height: 0, padding: 0, width: 0}); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
\t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 
    <body> 
 
\t \t <div class="row"> 
 
    \t <form name="form1" id="form1" class="col s12" method="post" action="insert2.php"> 
 
    \t \t \t <div class="input-field col s6"> 
 
\t \t \t \t <select class="validate" name="NameTitle" required="required"> 
 
    \t \t \t \t <option value="" disabled selected>Choose your option</option> 
 
\t \t \t  <option value="Dr">Dr</option> 
 
\t \t \t  <option value="Mr">Mr</option> 
 
\t \t \t  <option value="Mrs">Mrs</option> 
 
\t \t \t  <option value="Ms">Ms</option> 
 
    \t \t \t \t </select> 
 
\t \t \t \t <label for="NameTitle">Title:</label> 
 
    \t \t \t </div> 
 
      <div class="input-field col s6"> 
 
    \t \t \t \t <label class="active" for="ZoneOverseasCarer">Zone/Overseas/Carer:</label> 
 
\t \t \t \t <div> 
 
\t \t \t \t  <div class="input-field col s3"> 
 
\t \t \t \t \t  <input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerNo" value="No" required/> 
 
\t \t \t \t \t  <label for="ZoneOverseasCarerNo">No</label> 
 
\t  \t \t \t </div> 
 
\t \t \t  \t <div class="input-field col s3"> 
 
     \t \t \t \t \t <input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerYes" value="Yes"/> 
 
     \t \t \t \t \t <label for="ZoneOverseasCarerYes">Yes</label> 
 
    \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t \t 
 
\t \t \t <div class="input-field col s12"> 
 
    \t \t \t <button class="btn waves-effect waves-light" type="submit" id="submit" name="submit" value="submit">Submit 
 
    \t \t \t \t <i class="material-icons right">send</i> 
 
    \t \t \t \t </button> 
 
    \t \t \t </div> 
 
\t \t </form> 
 
\t \t </div> 
 
    </body>

來源

2017-02-11 Karumu

看來materializecss不渲染選擇驗證框是一個已知的問題（link）。

這不是一個完美的解決方案，但它是快速和骯髒的。

$(document).ready(function(){ 
    $('#NameTitle').material_select() 

    $("select[required]").css({ 
    display: "block", 
    'margin-top':'-15px', 
    height: 0, 
    padding: 0, 
    width: 0}); 
})

工作的jsfiddle link

來源

2017-02-11 08:22:09 pandamakes

謝謝你，這是一個更好的解決辦法比我有選擇部分。你會碰巧有一個更正單選按鈕的選項嗎？ – Karumu

驗證單選按鈕，並選擇具有Materialise框架的下拉列表

回答

相關問題