如何在通过ajax提交表单之前进行验证

Question

朋友们，我正在注册表格中有一些文字字段。所以一切都填满了，当用户按下提交按钮时，它应该转到javascript然后验证（客户端验证）然后对servlet进行ajax调用以处理后端函数。

到目前为止，ajax调用工作和后端函数工作正常。但是我正在整理前面验证的麻烦。请帮忙。

form.jsp

<div class="entry-form">
    <div id="message" style="display: none;"></div>
    <form id="newinput" name="userinfo" method="POST">
        <table width="100%" border="0" cellpadding="4" cellspacing="0">
            <tr>
                <td colspan="2" align="right"><a href="#" id="close">Close</a></td>
            </tr>
            <tr>
                <td>Employee ID:</td>
                <td><input type="number" name='empId' id='empId'
                    value="${emp_id}" placeholder="eg:123" class="required"></td>
            </tr>

            <tr>
                <td>First Name:</td>
                <td><input type='text' name='empFname' id='empFname'
                    value="${emp_fname}" placeholder="eg:Rizwan" class="required"></td>
            </tr>
            <tr>
                <td>Last Name:</td>
                <td><input type='text' name='empLname' id='empLname'
                    value="${emp_lname}" placeholder="eg:Mursaleen" class="required"></td>
            </tr>
            <tr>
                <td>Job Title:</td>
                <td><input type='text' name='empJtitle' id='empJtitle'
                    value="${emp_jtitle}" placeholder="eg: Software Developer"
                    required></td>
            </tr>
            <tr>
                <td>Job Type:</td>
                <td><input checked type='radio' name='empJtype' id='empJtype'
                    value="Permanent" class="required">Permanent <br> <input
                    type='radio' name='empJtype' value="Intern">Intern</td>
            </tr>
            <tr>
                <td>Department:</td>
                <td><select name='empDpart' id='empDpart' required>
                        <option value="HR">HR</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Sales">Sales</option>
                        <option value="Development">Development</option>
                        <option value="QA">QA</option>
                        <option value="Engineering">Engineering</option>
                </select></td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="submit" id="vbtn" value="Save"
                    /><input type="reset" value="Reset"
                    class="reset"></td>

            </tr>
        </table>
    </form>

</div>

Action.js

$(function() {

$.validator.setDefaults({
    errorClass : 'form_error',
    errorElement : 'div'
});

$('#newinput').validate(
        {

            rules : {
                empId : {
                    required : true
                },
                empFname : {
                    required : true
                },
                empLname : {
                    required : true
                },
                empJtitle : {
                    required : true
                }

            },
            messages : {
                empId : {
                    required : "Enter Your ID"
                },
                empFname : {
                    required : "Fname"
                },
                empLname : {
                    required : "Lname"
                },
                empJtitle : {
                    required : "Jtitle"
                }

            },

            submitHandler : function() {

                function test() {

                    var $form = $('#newinput');
                    var $messagebox = $('#message');
                    var $successmessage = "Thank You For Your Submission!";
                    var $errormessage = "Error - Please Try Again";

                    $.ajax({
                        type : $form.attr('method'),
                        url : 'Insert',
                        data : $form.serialize(),
                        dataType : 'json',
                        success : function(data) {
                            $messagebox.text($successmessage), $messagebox
                                    .fadeIn();
                            window.setTimeout(function() {
                                location.reload();
                            }, 2000);
                        },
                        error : function() {

                            $messagebox.text($errormessage), $messagebox
                                    .fadeIn();

                        }

                    });

                }

            }

        });

});

P.S

• Servlet网址：插入
• 表单ID：newinput

请帮助我。！