单击“创建”按钮之前的表单验证; 表中的模态体

Question

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">
                        &times;
                    </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');
            }
        });
    });
});

Answer 1

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');
                }
            });
        });
    });