表单验证样式无效

Question

I've been experimenting with JQuery form validation, but haven't been able to get success/failure classes to be added once the validation has been complete.

Here is my code:

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

The validation (OK vs. more info required) is working fine, it's just failing to add the success/failure class as well. I know it's something obvious I've missed out, but have come to a bit of a dead end.

The effect I'm looking for is like here: http://jsfiddle.net/5WMff/

Thanks.

Answer 1

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

Use submitHandler . Hope this will help you.