javascript - 表单验证样式不起作用

Question

我一直在试验 JQuery 表单验证，但无法在验证完成后添加成功/失败类。

这是我的代码:

https://jsfiddle.net/5WMff/

<form method = "post" id = "signUpForm">
    <div class="modal-body">
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input type="text" class="form-control" name="firstName">
        </div>
        <div class="form-group">
            <label for="surname">Surname:</label>
            <input type="text" class="form-control" name="surname" >
        </div>
        <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" name="email">
        </div>
        <div class="form-group">
            <label for="phoneNumber">Phone Number:</label>
            <input type="phone" class="form-control" name="phoneNumber">
        </div>
        <div class="form-group">
            <label for="postalCode">Home Postcode:</label>
            <input type="text" class="form-control" name="postalCode">
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name = "acceptTCs">Accept Terms and Conditions</label>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Back</button>
        <input type = "submit" name = "submit" class = "btn btn-success btn-large" value = "Submit" ></button>
    </div>
</form>

JS:

$(document).ready(function () {


    $('#signUpForm').validate({
        rules: {
            firstName: {
                minlength: 2,
                required: true
            },
            surname: {
                required: true,
                email: true
            },
            email: {
                minlength: 2,
                required: true
            },
            phoneNumber: {
                minlength: 7,
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
            .closest('.form-group').removeClass('error').addClass('success');
        }
    });
});

验证(确定与需要更多信息)工作正常，只是未能添加成功/失败类。我知道这很明显我错过了，但已经走到了死胡同。

我正在寻找的效果就像这里:http://jsfiddle.net/5WMff/

谢谢。

Answer 1

$.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

使用 submitHandler 。希望这对您有所帮助。