jQuery Validation Plugin - Как только форма верна - PullRequest
Новая
       6

jQuery Validation Plugin - Как только форма верна

1 голос
/ 02 ноября 2010

Вопрос о проверке jQuery. Когда моя форма загружается, у меня есть кнопка отправки с непрозрачностью 50%, чтобы сообщить пользователю, что она отключена.

Как только форма отвечает всем правилам, onkeyup, как мне это обнаружить и разрешить вернуть непрозрачность кнопок отправки на 100%.

«success: function (label) {» слишком поздно, так как запрашивает, что пользователь перешел к следующему полю, что не работает в моем приложении.

Идеи

Ответы [ 2 ]

3 голосов
/ 03 ноября 2010

Вы можете легко перехватить обратные вызовы механизма проверки, используя опции метода проверки .Вот пример (также поместите его в jsbin ): 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<script>
$(function() {
    var button = $('#submit1');
    function buttonHandler(validator) {
        var errors = validator.numberOfInvalids();
        if(errors === 0) {
            button.removeAttr('disabled');
        } else {
            button.attr('disabled', 'disabled');
        }
    }

    $('#form1').validate({
        rules: {
            text1: { required: true }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
            buttonHandler(this);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass(errorClass);
            $(element).removeClass(validClass);
            buttonHandler(this);        
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).addClass(validClass);
            $(element).removeClass(errorClass);
            buttonHandler(this);
        }
    }).form(); // trigger validation
});
</script>
    <form id="form1" action="#">
        <input id="text1" name="text1" type="text" /><br/>
        <input id="submit1" name="submit1" type="submit" value="Test" disabled="disabled" />
    </form>
</body>
</html>

Ключом здесь является запуск проверки перед любым пользовательским вводом (используя validator.form () method), поэтому jquery.validate начинает прослушивать входные события и запускает обратные вызовы при срабатывании ключевых (и других) событий.

0 голосов
/ 03 ноября 2010

Я делаю это по-другому.У вас есть проверка формы на сервере, конечно?И зачем проверять данные формы дважды?В клиенте и на сервере.

Мое решение - отправить форму с ajax на сервер, проверить там, и если нет ошибок - сохранить данные (или что-то ...).Если валидатор сервера находит какие-либо ошибки, возвращается форма (на json ...) и ошибки отображаются на клиенте.

Помогите это?Martin

...