Question

- 更新：感谢pandamakes我有一个选择下拉列表的解决方案。仍在寻找单选按钮的解决方案。提前谢谢 -

所以我正在尝试制作单选按钮并选择所需。当不包括Materialise js时，它可以正常工作，如下所示： https://jsfiddle.net/foch6otj/1/

不幸的是，这似乎与Materialize不兼容，验证警报停止显示，实际上选择完全消失了。但是，我发现了一个解决方法是显示select和alert，它是代码的$（“select”）。material_select（）部分，但是，警报定位不正确。由于某种原因，它不会显示在此代码段中，但在我的本地MAMP服务器上，它显示在此图像中： screenshot

我想尽可能保持物化样式，我意识到我可以使用其他方法来验证该字段但是因为我表单上的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"/>
	<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>
		<div class="row">
    	<form name="form1" id="form1" class="col s12" method="post" action="insert2.php">
 			<div class="input-field col s6">
				<select class="validate" name="NameTitle" required="required">
   				<option value="" disabled selected>Choose your option</option>
			    <option value="Dr">Dr</option>
			    <option value="Mr">Mr</option>
			    <option value="Mrs">Mrs</option>
			    <option value="Ms">Ms</option>
 				</select>
				<label for="NameTitle">Title:</label>
 			</div>
            <div class="input-field col s6">
 				<label class="active" for="ZoneOverseasCarer">Zone / Overseas / Carer:</label>
				<div>
				    <div class="input-field col s3">
					    <input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerNo" value="No" required/>
					    <label for="ZoneOverseasCarerNo">No</label>
	    			</div>
			    	<div class="input-field col s3">
      					<input name="ZoneOverseasCarer" class="with-gap" type="radio" id="ZoneOverseasCarerYes" value="Yes"/>
      					<label for="ZoneOverseasCarerYes">Yes</label>
    				</div>
	  			</div>
	  		</div>  		
			<div class="input-field col s12">
    			<button class="btn waves-effect waves-light" type="submit" id="submit" name="submit" value="submit">Submit
    				<i class="material-icons right">send</i>
  				</button>
  			</div>
		</form>
		</div>
    </body>

Answer 1

似乎materializecss没有呈现选择验证框是一个已知问题（link）。

这不是一个完美的解决方案，但它又快又脏。

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

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

工作jsfiddle link

验证单选按钮并使用Materialize框架选择下拉列表

1 个答案: