Question

我想验证自定义字段中是否有任何文本，但仅限于上面选择了自定义选项。我是非常新的HTML（好吧有C）所以请原谅我的其余错误（可能很多），但请指出他们的解释:) 我尝试过跟随人们在这里发布的其他问题，情况非常相似，但没有取得任何进展。谢谢！

＆＃13;

        <html lang="en">
        <main>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    	
		<h1>D D D S </h1>
		
		<link rel="stylesheet"href="request.css">
		<script src="jquery.js"></script>
		<script src="jquery.validate.js"></script>
		<script>
		jQuery(function ($) {
		$('#myInput').validate({
			debug: true,
			rules: {
        customdrinkfield: {
            required: function (el) {
                return $(el).closest('form').find('.drinkChoice').val() == 'custom'; } }
			}
		});
        });			</script>
		<script type="text/javascript">
			function checkvalue(val) {
			  var element=document.getElementById('çustomdrinkfield');
				if(val=="custom")
					   document.getElementById('customdrinkfield').style.display='block';
				else
					document.getElementById('customdrinkfield').style.display='none';
				}				
		</script>		
		</head>

         <body>
	 
	     <div class="field">
		
		<!--name field //-->
		<form class="form-request" action="" method="POST" id="myInput>
		<label for="inputName" class="sr-only"></label>
		<input for="name" name="inputName" value="" id="inputName" class="form-control" placeholder="Name" maxlength="16" required autofocus>
	
	    <!--location field //-->
		<br>
		<select name="location" onchange='checkvalue(this.value)' required>
			<option value="" disabled selected hidden>Delivery Location</option>
			<option value="deck">Deck</option>
			<option value="grass">Grass</option>
			<option value="poolShallow">Pool shallow</option>
			<option value="poolDeep">Pool Deep</option>
		</select>
		
		<!--drink field	//-->
		<br>
		<select name="drink" id="drinkChoice" onchange='checkvalue(this.value);' required> 
			<option value="" disabled selected hidden>Drink Choice</option>
			<option value="Slushie A">Slushie A</option>
			<option value="Sluishie B">Slushie B</option>
			<option value="water">Water</option>
			<option value="custom">Custom</option>
		</select>

		<!--custom field //-->
		<input type="text" name="customdrinkfield" id="customdrinkfield" style='display:none;' placeholder="Custom"/>
		
		</br>
		<!--submit //-->
		<button id="btnRequest" type="submit" formvalidate value="Submit">Request</button>
		</form>
	    </div>
       </body>
       </main>
       </html>

＆＃13;

Answer 1

你快到了。但问题是，当您尝试使用drinkChoice找到select element classname时，drinkChoice是id给element #drinkChoice并且您必须使用.drinkChoice而不是rule statement。因此，您更新的customdrinkfield: { required: function(el) { return $(el).closest('form').find('#drinkChoice').val() == 'custom'; //^^this here } }应如下所示：

javascript

<强> Here is the DEMO

我发现的错误或在下面说的更好是一种很好的做法：

在body结束之前，在页面下方保留<script type="text/javascript">相关内容。它提高了性能。
最好只有一个js，并将所有checkvalue代码包装在其中。不需要多个部件。
密切关注html功能。如果你从下到上，它将无法正常工作。

所以这里有更新的<html lang="en"> <main> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <h1>D D D S </h1> <link rel="stylesheet"href="request.css"/> </head> <body> <div class="field">  <form class="form-request" action="" method="POST" id="myInput> <label for="inputName" class="sr-only"/> <input for="name" name="inputName" value="" id="inputName" class="form-control" placeholder="Name" maxlength="16" required autofocus/>  <br/> <select name="location" onchange='checkvalue(this.value)' required> <option value="" disabled selected hidden>Delivery Location</option> <option value="deck">Deck</option> <option value="grass">Grass</option> <option value="poolShallow">Pool shallow</option> <option value="poolDeep">Pool Deep</option> </select>  <br/> <select name="drink" id="drinkChoice" onchange='checkvalue(this.value);' required> <option value="" disabled selected hidden>Drink Choice</option> <option value="Slushie A">Slushie A</option> <option value="Sluishie B">Slushie B</option> <option value="water">Water</option> <option value="custom">Custom</option> </select>  <input type="text" name="customdrinkfield" id="customdrinkfield" style='display:none;' placeholder="Custom"/>  <button id="btnRequest" type="submit" formvalidate value="Submit">Request</button> </form> </div> <script src="jquery.js"></script> <script src="jquery.validate.js"></script> <script type="text/javascript"> jQuery(function ($) { $('#myInput').validate({ debug: true, rules: { customdrinkfield: { required: function (el) { return $(el).closest('form').find('#drinkChoice').val() == 'custom'; } } } }); }); function checkvalue(val) { var element=document.getElementById('çustomdrinkfield'); if(val=="custom") document.getElementById('customdrinkfield').style.display='block'; else document.getElementById('customdrinkfield').style.display='none'; } </script> </body> </main> </html>

Intent cameraIntent = new Intent(
                android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, outputFileUri);
this.startActivityForResult(cameraIntent, 101);

jQuery验证。只有特定选项才需要

1 个答案: