输入字段为空时jQuery验证不起作用

Question

我认为这并不复杂，但我自己做不到。非常感谢您的帮助。

我将提交一个带有验证的表单。我的验证似乎无法正常工作。因为当输入字段为空时，它不会显示错误消息。而且当单击提交按钮时，它也没有显示错误消息。此事件仅在输入字段为空时发生。

这是我的 HTML：

<form name="department" id="department">
    <div class="form-group">
        <label for="example-text-input">Department Name</label>
        <span id="errfnCustomer"></span>
        <input class="form-control" type="text" placeholder="Enter Department Name" id="textDepartmentName" name="textDepartmentName1">
    </div>
    <div class="form-group">
        <label for="example-text-input">Registation Number</label>
        <span id="errfnCustomer2"></span>
        <input class="form-control" type="text" placeholder="Enter Department Registation Number" id="textRegistationNumber" name="textRegistationNumber">
    </div>
    <div class="form-group">
        <label for="example-text-input">Web Site</label>
        <input class="form-control" type="text" placeholder="Web Site" id="textWebsite" name="textWebsite1">
    </div>
    <div class="form-actions">
        <div class="form-group">
            <input type="button" value="Register" class="btn pull-right" id="btnsubmit" style="background-color:#1e90ff; width: 100px; color: white; font-weight: bold" />
        </div>
    </div>
</div>

还有 jQuery：

$('#department').validate({
    rules: {
        textDepartmentName1: {
            required: true,
            minlength: 3,
        },
        textRegistationNumber: {
            required: true,
            minlength: 3
        },
        textWebsite1: {
            required: true,
            minlength: 3
        }

    },
    submitHandler: $("#btnsubmit").click(function (form) {
        var submitData = {
            DepartmentId: saveStat,
            DepartmentName: $('#textDepartmentName').val().trim(),
            RegistationNumber: $('#textRegistationNumber').val(),
            Website: $('#textWebsite').val(),
            Email: $('#textEmail').val(),
            Telephone01: $('#textTelephone01').val(),
            Telephone02: $('#textTelephone02').val(),
            Fax: $('#textFax').val(),
            BranchId: $('#cmbGetBranch').val()
        }

        if (saveStat == 0) {
            $.ajax({
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                type: 'POST',
                data: "{submitData:" + JSON.stringify(submitData) + "}",
                url: "/Department/AddDepartment",
                success: function (saveDepartment) {
                    if (saveDepartment.saveDepartment.DepartmentId != 0) {
                        refresh();
                        alert(saveDepartment.saveDepartment.DepartmentName + " Saved succesfully...!!!");
                    } else {
                        alert('warning' + " Department saving unsucsessful...!!!");

                    }
                },
                error: function (xhr, errorThrown) {
                    alert('Error...!!! Internal - 01');
                }

            });
        } else {
            $.ajax({
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                type: 'POST',
                data: "{submitData:" + JSON.stringify(submitData) + "}",
                url: "/Department/UpdateDepartment",
                success: function (updateDepartment) {
                    if (updateDepartment.updateDepartment.DepartmentId != "") {
                        alert(updateDepartment.updateDepartment.DepartmentName + " updated succesfully...!!!");
                        refresh();
                    } else {
                        alert("Department update error...!!!");
                    }
                },
                error: function (xhr, errorThrown) {
                    alert('Error...!!!');
                }
            });
        }
        grid();
    })
});

Answer 1

首先使注册按钮类型提交：

 <input type="submit" value="Register" class="btn pull-right" id="btnsubmit" style="background-color:#1e90ff; width: 100px; color: white; font-weight: bold" />

并使提交处理程序如下所示：

submitHandler:function (form) {

}

在此处查看更多信息 (Jquery validation)。