我是 Modals 和 jQuery 的新手。我需要一些帮助。我有一个表单，正在使用 LiveValidation 库，而且我还有 Bootstrap Modal。我使用 Modal 向用户显示表单中的输入，并有一个确认提交按钮。
当前设置是。当用户填写所有字段时，将出现模态框并显示用户的输入并具有用于提交的确认按钮。现在，我添加了验证，但遇到了一些逻辑错误或代码排列不正确？
当用户没有填写所有字段时，验证将开始(这是我想要的)，但我的模态也会出现。如果单击模态框内的提交按钮，它将不会提交，因为用户尚未填写表单中的所有字段，这是可以的。
我只是希望如果所有字段均未填写或验证，我的模态框不会显示。
我在表单上有一个提交按钮，它同时调用验证和模式，我知道这是原因。我只需要帮助如何安排或重组我的代码？
这是我的 HTML
<!-- Start Form -->
<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" />
<div class="required-field-block">
<label>Last Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
</div>
<div class="form-group">
<label>First Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
</div>
<div class="form-group">
<label>Address Information</label>
</div>
<div class="col-lg-12">
<div class="form-group">
<select class="selectpicker" id="island" name="island" onchange="document.getElementById('island2').value=this.options[this.selectedIndex].text">
<option value="">Choose One</option>
<option value="1">Luzon</option>
<option value="2">Visayas</option>
<option value="3">Mindanao</option>
</select>
<span class="label label-primary">Island</span><span class="label label-danger">*required</span>
</div>
<div class="form-group">
<select class="selectpicker" id="region" name="region" onchange="document.getElementById('region2').value=this.options[this.selectedIndex].text" data-live-search="true">
<option value="">Choose One</option>
</select>
<span class="label label-primary">Region</span><span class="label label-danger">*required</span>
</div>
<div class="form-group">
<select class="selectpicker" id="province" name="province" onchange="document.getElementById('province2').value=this.options[this.selectedIndex].text" data-live-search="true">
<option value="">Choose One</option>
</select>
<span class="label label-primary">Province</span><span class="label label-danger">*required</span>
</div>
<div class="form-group">
<select class="selectpicker" id="city" name="city" onchange="document.getElementById('city2').value=this.options[this.selectedIndex].text" data-live-search="true">
<option value="">Choose One</option>
</select>
<span class="label label-primary">City</span><span class="label label-danger">*required</span>
</div>
<div class="form-group">
<select class="selectpicker" id="barangay" name="barangay" onchange="document.getElementById('barangay2').value=this.options[this.selectedIndex].text" data-live-search="true">
<option value="">Choose One</option>
</select>
<span class="label label-primary">Barangay</span><span class="label label-danger">*required</span>
</div>
</div>
<div class="form-group">
<label>Address</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter Address (ex. 1234 Sample Street)" name="address" id="address">
</div>
<div class="form-group">
<select class="selectpicker" id="gender" name="gender">
<option value="">Choose One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<span class="label label-primary">Gender</span><span class="label label-danger">*required</span>
</div>
<div class="form-group">
<label>Birthdate</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter Select Date" name="birthdate" id="birthdate">
</div>
<!-- Hidden Fields to Get Island, Region, Province, City, Barangay as String -->
<input type="hidden" name="island2" id="island2" />
<input type="hidden" name="region2" id="region2" />
<input type="hidden" name="province2" id="province2" />
<input type="hidden" name="city2" id="city2" />
<input type="hidden" name="barangay2" id="barangay2" />
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" onclick="checkInput();";/>
<input type="button" name="btn" value="Reset" onclick="window.location='index.php'" class="btn btn-default" data-modal-type="confirm"/>
<!-- Start Modal -->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<strong>Confirm Submit</strong>
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<!-- We display the details entered by the user here -->
<table class="table">
<tr>
<th>Last Name</th>
<td id="modal_lastname"></td>
</tr>
<tr>
<th>First Name</th>
<td id="modal_firstname"></td>
</tr>
<tr>
<th>Island</th>
<td id="modal_island"></td>
</tr>
<tr>
<th>Region</th>
<td id="modal_region"></td>
</tr>
<tr>
<th>Province</th>
<td id="modal_province"></td>
</tr>
<tr>
<th>City</th>
<td id="modal_city"></td>
</tr>
<tr>
<th>Barangay</th>
<td id="modal_barangay"></td>
</tr>
<tr>
<th>Address</th>
<td id="modal_address"></td>
</tr>
<tr>
<th>Gender</th>
<td id="modal_gender"></td>
</tr>
<tr>
<th>Birthdate</th>
<td id="modal_birthdate"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" id="submit" name="btn" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
<!-- End Form -->
这是我的验证
<script type="text/javascript">
function checkInput()
{
var lastname = new LiveValidation( 'lastname', {onlyOnSubmit: true } );
lastname.add( Validate.Presence );
var firstname = new LiveValidation( 'firstname', {onlyOnSubmit: true } );
firstname.add( Validate.Presence );
var island = new LiveValidation( 'island', {onlyOnSubmit: true } );
island.add( Validate.Presence );
var region = new LiveValidation( 'region', {onlyOnSubmit: true } );
region.add( Validate.Presence );
var province = new LiveValidation( 'province', {onlyOnSubmit: true } );
province.add( Validate.Presence );
var city = new LiveValidation( 'city', {onlyOnSubmit: true } );
city.add( Validate.Presence );
var barangay = new LiveValidation( 'barangay', {onlyOnSubmit: true } );
barangay.add( Validate.Presence );
var address = new LiveValidation( 'address', {onlyOnSubmit: true } );
address.add( Validate.Presence );
var gender = new LiveValidation( 'gender', {onlyOnSubmit: true } );
gender.add( Validate.Presence );
var birthdate = new LiveValidation( 'birthdate', {onlyOnSubmit: true } );
birthdate.add( Validate.Presence );
var automaticOnSubmit = lastname.form.onsubmit;
lastname.form.onclick = function(){
var valid = automaticOnSubmit();
if(valid)alert('The form is valid!');
return false;
}
}
</script>
这只是一个脚本，它将从表单获取输入并将其复制到模式
<script type="text/javascript">
/* Get input and show to modal */
$('#submitBtn').click(function() {
/* when the button in the form, display the entered values in the modal */
$('#modal_lastname').html($('#lastname').val());
$('#modal_firstname').html($('#firstname').val());
$('#modal_island').html($('#island2').val());
$('#modal_region').html($('#region2').val());
$('#modal_province').html($('#province2').val());
$('#modal_city').html($('#city2').val());
$('#modal_barangay').html($('#barangay2').val());
$('#modal_address').html($('#address').val());
$('#modal_gender').html($('#gender').val());
$('#modal_birthdate').html($('#birthdate').val());
});
$('#submit').click(function(){
/* when the submit button in the modal is clicked, submit the form */
$('#formfield').submit();
});
</script>
最佳答案
如果验证失败，您已经返回 false，因此您只需在显示模式之前进行检查(如果通过则返回 true)。不要直接从提交中调用 checkInput()，而是调用另一个在内部调用 checkInput() 的函数。
<input type="button" name="btn" value="Submit" id="submitBtn" class="btn btn-default" onclick="submitForm();";/>
function submitForm() {
var valid = checkInput();
if (valid) {
$('#confirm-submit').modal('show');
}
}
关于jquery - 在调用 Bootstrap Modal 之前先进行验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23796599/