Проверка jQuery - проверка в реальном времени

Question

Я использую JQuery Validation DOCS .

Просто интересно, можем ли мы сделать проверку на фокусе перед отправкой формы? В спецификации есть опция, но она работает только после первой отправки формы.

То, что я пытаюсь достичь - как вы хотите, чтобы сфокусироваться - он помечает ввод как действительный (проверка) или недействительный (ошибка сообщения).

В настоящее время функциональность есть, но только после отправки формы.

Мой код проверки:

$('.loginbox').validate({
        debug: true,
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 8
            },
            username: {
                required: true,
                minlength: 2 
            }
        },
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
        },
        success: "valid",
        submitHandler: function() { alert("Submitted!") }
    });

Любая помощь высоко ценится. Пит

Answer 1

Если текстовый ввод действителен в соответствии с плагином проверки, он создает метку класса ошибок.

<label class="error valid" for="spill" generated="generated"></label>

Используйте CSS tp, подобрать вот так

label.error:before {
content:        "\0020 \2718 \0020"; // is an X
color:          red;
}


label.error {
    padding-left: 16px;  
    margin-left: .3em;
}
label.valid {
    display: block;
    width: 16px;
    height: 16px;
}
label.valid:before {
content:       "\0020 \2714"; // Is a Checkmark
color:          green;

}

Конечно, вместо сущностей вы можете использовать и img. При ошибке это покажет X, а также сообщение, которое вы разработали при проверке. , В случае успеха и когда вы оставите текстовый ввод, он также оставит галочку под вводом.

Вы также можете использовать сообщения в валидаторе, подобные этому

$("#upd").rules("add", {
        required: true,
        minlength: 1,
        maxlength: 1,
    messages: {
        required: "Please pick a category",
        minlength: jQuery.format("Please, Check at least one box"),
        maxlength: jQuery.format("Please, You checked too many boxes"),
    }
});