我希望在未填写名为“.reqF”的类时显示警告弹出窗口，并在填充所有“.reqF”时将表单发送到操作页面。
这是我的表格
<form method="post" class="flat-p-form p-form-flat-extra5color4" action="/payment-verify-before-submit-multiple-students/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true" style="margin: 30px 0;" id="paymentForm" >
<input type="text" name="parentName" placeholder="Parent Name" required class="form-control reqF" value=""/>
<input type="text" name="payee_email" placeholder="Email" required class="form-control reqF" value=""/>
<input type="text" name="parentMobile" placeholder="Mobile No" required class="form-control reqF" value=""/>
<hr/>
<input type="text" id="sudentname" name="sudentname[]" placeholder="Student Name" required class="form-control reqF" />
<input type="text" id="admissionnmbr" name="admissionnmbr[]" placeholder="Admission No" class="form-control reqF" required />
<select id="budget" name="purpose[]" class="form-control reqF" required>
<option class="p-select-default" value="">--Type--</option>
<option value="SchoolFees">School Fees </option>
<option value="BoardingFees">Boarding Fees</option>
</select>
<input type="text" id="amount" name="amount[]" placeholder="Amount" required class="form-control reqF inputChangeVal" data-js-input-type="number" />
<select name="Grade[]" id="grade" class="form-control reqF" required>
<option class="p-select-default" value="" >-- Grade --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<div class="add_another_st"></div>
<hr/>
<button class="btn add_another_st_btn" style="float: right;">ADD ANOTHER STUDENT</button>
<hr/>
<div class="col-sm-3" style="font-size: 20px; border-bottom: 1px solid; padding-bottom: 10px;">
Total Amount
</div>
<div class="col-sm-12">
<input type="text" class="totalAmount" id="updatedTotalAmount" style="font-size: 20px; font-weight: bold; margin-bottom: 25px; text-align: right; border: 0;" readonly />
</div>
<button class="btn" class="confirm" type="submit" name="confirm" id="payBtn"><i class="fa fa-share-square-o"></i> Pay Now</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proccess Payment</h4>
</div>
<div class="modal-body">
<p>
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
</p>
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalforErrorMsg" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">All required fields should be filled.</h4>
</div>
<div class="modal-body">
<p>
"Following fields should be filled for all the students you've added"
<ul>
<li>Student Name</li>
<li>Admission No.</li>
<li>Grade</li>
<li>Payment Type</li>
<li>Amount</li>
</ul>
</p>
<button class="btn btn-default" data-dismiss="modal">UPDATE</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
这是我的jquery：
<script>
jQuery( document ).ready(function() {
var wrapper = jQuery(".add_another_st"); //Fields wrapper section 3
var add_button = jQuery(".add_another_st_btn"); //Add button section 3
var add_sec_3 = '<div class="add_another_st"><hr/><div class="row"><div class="col-sm-12"><div class="form-group"><label for="sudentname" class="p-label-required">Student Name</label><span style="color: red"> Type the name as how it appears in the college registry</span><div class="input-group p-has-icon"><input type="text" id="sudentname" name="sudentname[]" placeholder="Student Name" class="form-control reqF" required aria-required="true" aria-invalid="false"/><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-user"></i></span></div></div></div></div><div class="row"><div class="col-sm-6"><div class="form-group"><label for="name" class="p-label-required">Admission No</label><div class="input-group p-has-icon"><input type="text" id="admissionnmbr" name="admissionnmbr[]" placeholder="Admission No" class="form-control reqF" required /><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-sort-numeric-asc"></i></span></div></div></div><div class="col-sm-6"><div class="form-group"><label for="budget" class="p-label-required">Payment Type</label><label class="input-group p-has-icon p-custom-arrow"><select id="budget" name="purpose[]" class="form-control reqF required"><option class="p-select-default" value="">--Select--</option><option value="SchoolFees">School Fees </option><option value="BoardingFees">Boarding Fees</option></select><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-valid-text"><i class="fa fa-check"></i></span><span class="p-error-text"><i class="fa fa-times"></i></span></span></span></span><span class="p-field-cb"></span><span class="p-select-arrow"><i class="fa fa-caret-down"></i></span><span class="input-group-icon"><i class="fa fa-bullseye"></i></span></label></div></div></div><div class="row"><div class="col-sm-6"><div class="form-group"><label for="name" class="p-label-required">Amount <span style="color: red"> (Numbers only)</span></label><div class="input-group p-has-icon"><input type="text" id="amount" name="amount[]" placeholder="Amount" class="form-control inputChangeVal reqF" data-js-input-type="number" required /><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-money"></i></span></div></div></div><div class="col-sm-6"><div class="form-group"><p>Grade</p><label class="input-group p-custom-arrow"><select name="Grade[]" class="form-control reqF" required><option class="p-select-default" value="">-- Select --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option></select><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="p-select-arrow"><i class="fa fa-caret-down"></i></span></label></div></div></div><a href="#" class="remove_field btn" style="margin-bottom: 15px;">-</a></div>';
// Add Brother begins
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
//jQuery(add_button).click(function(e){ //on add input button click
//jQuery(add_button).click(function(e){
jQuery(add_button).on('click', function(e){
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
jQuery(wrapper).append(add_sec_3); //add section
jQuery('.add_another_st .add_another_st:last').hide();
jQuery('.add_another_st .add_another_st:last').show('fast');
}
});
jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
//e.preventDefault(); jQuery(this).parent('div').remove(); x--;
e.preventDefault();
jQuery(this).parent('div').slideUp(1000, function() {
jQuery(this).remove();
x--;
updateTotal();
});
});
// Add Brother Ends
function updateTotal()
{
var price = 0;
jQuery(".inputChangeVal").each(function(){
var t = parseFloat(jQuery(this).val(), 10);
price = price + t;
});
//var total = (price + 1) * 1.05;
var total = price.toFixed(2);
jQuery(".totalAmount").val(total);
console.log('updateTotal Runs');
}
jQuery(document).on("change, keyup", ".inputChangeVal", updateTotal);
jQuery(document).ready(function() {
jQuery('#payBtn').on('click', function(e) {
e.preventDefault();
var empty = false;
jQuery('.reqF').each(function() {
if (jQuery(this).val() === '') {
console.log('error');
empty = false;
} else empty = true;
});
if (empty == true)
jQuery('#myModal').modal('toggle');
else
//console.log('your error message');
jQuery('#myModalforErrorMsg').modal('toggle');
});
jQuery('#continuebtn').on('click', function() {
jQuery('form').submit();
});
var hiddenTot = jQuery('.reqFamount').val() ;
//alert (hiddenTot);
jQuery(".totalAmount").val(hiddenTot);
});
});
</script>
但是，只有当最后一个元素/等级没有填满时，它才会显示#myModalforErrorMsg框。
我只能在填写grade后以及当我离开其他.reqF字段为空时才提交表单。
为什么会这样？
有时它适用于本地主机，但从不在WordPress中运行..
我缺少什么？
答案 0 :(得分：1)
此代码段存在问题
jQuery('.reqF').each(function() {
if (jQuery(this).val() === '') {
console.log('error');
empty = false;
} else empty = true;
});
if (empty == true)
jQuery('#myModal').modal('toggle');
else
//console.log('your error message');
jQuery('#myModalforErrorMsg').modal('toggle');
因为，你正在遍历所有元素，如果最后一个被填充，则空变为真，因此错误不会显示。你想要的是如果任何空是假的你显示显示错误。 你可以修改if循环如下，使它工作。将empty初始化为true。
if (jQuery(this).val() === '') {
console.log('error');
empty = empty && false;
} else empty = empty && true;