Javascript 验证所需的多选下拉列表
我正在尝试验证multiselect下拉列表是否为必填字段。我的表单包括文本框、下拉列表和多选。由于它的程序形式很长，我使用“下一步”按钮继续填写表单的更多细节。 我被“下一步”按钮的多选验证卡住了。“下一步”按钮未将multiselect显示为必填字段。 我只是想确保multiselect不是空的，并且用户已经做出了选择Javascript 验证所需的多选下拉列表,javascript,php,validation,Javascript,Php,Validation,我正在尝试验证multiselect下拉列表是否为必填字段。我的表单包括文本框、下拉列表和多选。由于它的程序形式很长，我使用“下一步”按钮继续填写表单的更多细节。 我被“下一步”按钮的多选验证卡住了。“下一步”按钮未将multiselect显示为必填字段。 我只是想确保multiselect不是空的，并且用户已经做出了选择 <div class="row"> <div class="col-sm-10 col-sm-offset-1 col-m
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box" id="form-content">
<form role="form" action="index.php" method="post" class="f1" id="myForm">
<h3 style="color: #000;">Registration</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="8" data-number-of-steps="6" style="width: 8%;"></div>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>Basic Details</p>
</div>
<div class="f1-step ">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>Account Details</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>User Details</p>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-question"></i></div>
<p>Additional Details</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-credit-card"></i></div>
<p>Payment Details</p>
</div>
</div>
<fieldset>
<h4>Select Media types</h4>
<div class="form-group">
<label for="media_type_ids">Select Media types </label>
<select id="mySel3" multiple="multiple" class="select2 btn btn-default form-control" name="media_type_ids[]" style="font-family: 'Roboto', sans-serif; font-size: 15px;" required>
<optgroup label="Select multiple">
<option value="8">Adware</option>
<option value="26">Andriod-Mobile</option>
<option value="3">Banner</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="vertical_category_ids">Select Vertical categories </label>
<select id="vertical_category_ids" multiple="multiple" class="form-control" name="vertical_category_ids[]" style="font-family: 'Roboto', sans-serif; font-size: 15px;">
<option value=" ">Select Vertical categories </option>
<option value="16">Business & Finance</option>
<option value="26">Education</option>
<option value="49">Financial Products & Services</option>
<option value="57">Food & Drink</option>
<option value="66">Health, Beauty & Personal Care</option>
<option value="80">Home & Garden</option>
</select>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<h4 style="color: #000;">Payment Details:</h4>
<!-- <div class="form-group">
<label class="sr-only" for="f1-date">Date</label>
<input type="date" name="date_added" placeholder="Date..." class="f1-date form-control" id="f1-date">
</div> -->
<div class="form-group">
<label class="sr-only" for="payment_min_threshold">Payment Threshold</label>
<select id="payment_min_threshold" class="form-control" name="payment_min_threshold" style="font-family: 'Roboto', sans-serif; font-size: 15px;" required>
<option value="">Select Payment Threshold</option>
<option value="100.00">Send me payment above $100</option>
<option value="200.00">Send me payment above $200</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="payment_to">Payment To</label>
<select id="payment_to" class="form-control" name="payment_to" style="font-family: 'Roboto', sans-serif; font-size: 15px;" required >
<option value="">Select Payment To</option>
<option value="0">Payment to Company</option>
<option value="1">Payment to Person</option>
</select>
</div>
<div class="form-group">
<label for="referral_notes" class="sr-only">Did anyone refered you to our website?</label>
<input type="text" name="referral_notes" placeholder="Did anyone refered you to our website? .." class="referral_notes form-control" id="referral_notes" value="<?php if(isset($_POST['referral_notes'])) echo $_POST['referral_notes']; ?>">
</div>
<div class="form-group">
<label for="notes" class="sr-only">notes</label>
<textarea name="notes" placeholder="Which other networks do you work with?"
class="notes form-control" id="notes" value="<?php if(isset($_POST['notes'])) echo $_POST['notes']; ?>"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
$(this).find('input[type="text"], input[type="email"], input[type="url"], textarea, select').each(function() {
var inputvalue = $(this).val();
if( inputvalue == "" || $.trim(inputvalue).length == 0) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
$(this).find('input[type="text"], input[type="email"], input[type="url"], textarea, select').each(function() {
var inputvalue = $(this).val();
if( inputvalue == "" || $.trim(inputvalue).length == 0) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
希望这会有所帮助谢谢您的回复，但它不起作用。静止状态进入下一步。工作正常。。在（'click'，function（）…非常感谢..感谢您的回复，但它不起作用。表单仍将进入下一步。工作正常..在（'click'，function（）…非常感谢..上使用$（'.f1.btn next'）可以很好地验证。。