我是Modals和jQuery的新手。我需要一些帮助。我有一个表单,我使用的是LiveValidation库,也有Bootstrap Modal。我使用Modal来显示表单中的用户输入,并有确认提交按钮。在调用引导程序之前先验证引导程序模式
当前设置为。当用户填写所有字段时,模态将出现并显示用户的输入并有确认按钮提交。现在,我添加了验证,并且出现了一些逻辑错误或不正确的代码安排?
当用户没有填满所有的字段验证开始(我想要的),但我的莫代尔也出现了。如果点击Modal内的提交按钮,它将不会提交,因为用户没有填好表格中的所有字段。
我只想让我的Modal不显示,如果所有的字段没有填写或验证。
我在同一时间调用Validation和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>
感谢您的帮助。我尝试了你的建议,但即使填满所有字段,我的Modal也不显示。 – jackhammer013
@JoeneFloresca你是否显示模态是否有效?例如,看我的编辑。还要确保你从checkInput()返回true或false – aw04
是的,先生。你的编辑就是我所做的。如何检查checkInput()是否返回true或false? – jackhammer013