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

朋友们，我有一张带有一些文本字段的登记表。因此，当用户按下submit按钮时，它应该转到javascript，然后验证客户端验证，然后对servlet进行ajax调用以处理后端功能

到目前为止，ajax调用工作正常，后端函数工作正常。但我在整理前期验证时遇到了麻烦。请帮忙

form.jsp

附言

Servlet url:Insert 表单id:newinput

---

请帮帮我

我想你需要先预防违约。在Submit上调用javascript函数该函数应类似于functionevent//此处event是事件对象。在功能上，第一件事应该是事件；在此之后，您可以验证并通过js/jQuery提交它。希望这有帮助。您可以访问。@DimoMohit谢谢您的评论。这真的很有帮助。我试试看。

<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>

$(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();

                        }

                    });

                }

            }

        });

});