我正在尝试将多选下拉列表作为必填字段进行验证。我的表单包括文本框，下拉列表和多选。由于其冗长的程序形式，我使用下一个按钮继续填写表格的更多细节。 我被困在多选验证下一个按钮。下一个按钮未显示多选作为必填字段。 我只是想确保多选不是空的，用户已做出选择。
<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>
我的js是
/*
Form
*/
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], input[type="email"] , input[type="url"], input[type="lurl"], .f1 textarea, .f1 select, .f1 select[i].value').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], input[type="email"], input[type="url"], textarea, select').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
}
});
// previous step
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
});
// submit
$('.f1').on('submit', function(e) {
// fields validation
$(this).find('input[type="text"], input[type="email"], input[type="url"], textarea, select').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
我想知道，有没有办法在我的表单的下一个按钮的多选下拉列表中进行必要的验证。
您能指导我找到最佳解决方案吗？
由于
答案 0 :(得分：0)
试试这个。
$(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');
}
});
希望这会有所帮助