单击“创建”按钮之前的表单验证; 表中的模态体
问题描述：
I have this problem to put a form validation in the modal form before dismiss-modal or before submitting the data.
In my modal-body I have no form-group instead put the input tags into table td.
So now I am wondering how can I put a form validation in this modal.
I have this html modal:
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabelAdd" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 class="modal-title" id="myModalLabelAdd">Add User</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" id="search-form" role="form" method="post">
<table class="table table-bordered" id="edit_table">
<tbody>
<tr>
<td><b>First Name</b></td>
<td><input type="text" required class="typeahead form-control" id="first_name" placeholder="First Name" name="first_name"></td>
</tr>
<tr>
<td><b>Last Name</b></td>
<td><input type="text" required class="typeahead form-control" id="last_name" placeholder="Last Name" name="last_name"></td>
</tr>
<tr>
<td><b>Department</b></td>
<td><input type="text" required class="typeahead form-control" id="department" placeholder="Department" name="department"></td>
</tr>
<tr>
<td><b>Status</b></td>
<td>
<select required class="form-control" id="status">
<option value=""> </option>
<option value="Regular">Regular</option>
<option value="Probationary">Probationary </option>
<option value="Contractual">Contractual</option>
<option value="Trainee">Trainee</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close_add_button">
Close
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="create_employee"/>
Create
</button>
</div>
</div>
</div>
</div>
And I have this Jquery:
$(document).ready(function(
{
$( "#create_employee" ).click(function()
{
$.ajax({
url : '<?php echo base_url()?>employee/add_employee',
type: 'POST',
data: {
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
department: $('#department').val(),
status: $('#status').val()
},
success: function(msg){
var msg = $.parseJSON(msg);
employee_number = msg.EmployeeNo;
employee_first_name = msg.FirstName;
employee_last_name = msg.LastName;
$('#show_employee_number').append(employee_number);
$('#show_employee_first_name').append(employee_first_name);
$('#show_employee_last_name').append(employee_last_name);
$('#alert_success_show').modal('show');
}
});
});
});
答
Firstly, do not skip the server-side validation!
The following code is just checking for length but you could check for specific values etc.
$( function() {
$( '#search-form' ).on( 'submit', function(e) {
e.preventDefault();
var first = $( '#first_name' ).val();
var last = $( '#last_name' ).val();
if( first.length && last.length ) {
$( this ).submit();
} else {
alert( 'error' );
}
} );
} );
As of your edit:
$(document).ready(function(
{
$( "#create_employee" ).click(function()
{
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var department = $('#department').val();
var status = $('#status').val();
// Validate here
if( !first_name.length ) {
$( '#first_name' ).attr( 'style', 'border:1px solid red;' );
// The "right" way to do it would be
// $( '#first_name' ).addClass( 'error' );
// in css: .error{border:1px solid red;}
}
// etc etc
$.ajax({
url : '<?php echo base_url()?>employee/add_employee',
type: 'POST',
data: {
first_name: first_name,
last_name: last_name,
department: department,
status: status
},
success: function(msg){
var msg = $.parseJSON(msg);
employee_number = msg.EmployeeNo;
employee_first_name = msg.FirstName;
employee_last_name = msg.LastName;
// You are already using json so it would be simple to implement a error-handling-mechanism (pass {"status":"error"} or something equivalent.
$('#show_employee_number').append(employee_number);
$('#show_employee_first_name').append(employee_first_name);
$('#show_employee_last_name').append(employee_last_name);
$('#alert_success_show').modal('show');
}
});
});
});