jQuery Validator помечает необязательное поле как «ошибка» - PullRequest
1 голос
/ 11 октября 2011

Я использую последнюю версию плагина jQuery Validator вместе с jQuery (1.6.2).

У меня есть простая форма с необязательным полем для номера телефона, который называется Phone.Следующий код работает безупречно, когда все поля «обязательны для заполнения».Сегодня проблема в том, что я добавил необязательное поле, и Validator, похоже, игнорирует правила для этого необязательного поля.

HTML:

<div id="contact">
    <form id="contactForm" action="/cgi-bin/FormMail.pl" method="post">
        <input type="hidden" name="subject" value="Contact Form" />
        <input type="hidden" name="redirect" value="thankyou.html" />
        <input type="hidden" name="required" value="Name,email,Comments" />
        <input type="text" class="autoclear blur defaultInvalid" value="your full name" name="Name" /><br />
        <input type="text" class="autoclear blur defaultInvalid" value="your email address" name="email" /><br />
        <input type="text" class="autoclear blur defaultInvalid" value="your phone number" name="Phone" />
        <fieldset id="radioset">
            <input type="radio" id="radio-1" name="recipient" value="myEmail1@email.com" checked="checked" /><label for="radio-1">Label 1</label>
            <input type="radio" id="radio-2" name="recipient" value="myEmail2@email.com" /><label for="radio-2">Label 2</label>
            <input type="radio" id="radio-3" name="recipient" value="myEmail3@email.com" /><label for="radio-3">Label 3</label>
        </fieldset>
        <textarea class="autoclear blur defaultInvalid" name="Comments">your comments</textarea><br />
        <input type="submit" value="Send Message" />
    </form>
</div>

Я использую qTip2 дляукажите обязательные поля после проверки.

Все (технически) работает, оно проверяется и всплывающие подсказки qTip.

Вся проблема в том, что, несмотря на мои параметры, говорящие о том, что «Телефон» является необязательным, он продолжает помечать «Телефон» как требуется и выскакивает пустой qTip.Я знаю, что qTip2 здесь не проблема, потому что он просто ищет class="error".В DOM я вижу, что Валидатор применяет class="error" к необязательному полю, несмотря на мои правила.

(я знаю, required: false - это по умолчанию , но я все равно добавил это правило, потому чтоэтой проблемы. Это все еще игнорируется!)

Кто-нибудь может понять, почему он это делает?

jQuery / JavaScript:

$(document).ready(function() {

    var nameMsg = "Please enter your full name.",
        emailMsg = "Please enter your email address.",
        emailMsgV = "This is not a valid email address.",
        commentsMsg = "Please enter your comments.";

    $('#contactForm').validate({
        onkeyup: false,
        validClass: 'valid',
        rules: {
            Name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            Phone: {
                required: false
            },
            Comments: {
                required: true
            }
        },
        messages: {
            Name: nameMsg,
            email: {
                defaultInvalid: emailMsg,
                required: emailMsg,
                email: emailMsgV
            },
            Comments: commentsMsg
        },
        success: function(error) {
            setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
                $('#contactForm').find('.valid').qtip('destroy');
            }, 1);
        },
        submitHandler: function(form) {
            form.submit();
        },
        errorPlacement: function(error, element) {
            $(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
                overwrite: false,
                content: error,
                position: {
                    my: 'bottom left',
                    at: 'top left',
                    viewport: $(window),
                    adjust: {
                        x: 25
                    }
                },
                show: {
                    event: false,
                    ready: true
                },
                hide: false
            }).qtip('option', 'content.text', error);
        } // closes errorPlacement
    }) // closes validate()    
}); // closes document.ready()

1 Ответ

2 голосов
/ 11 октября 2011

Я обнаружил проблему ...

Я по ошибке применил класс defaultInvalid к необязательному полю .Doh!

Вместо этого он должен выглядеть следующим образом ...

<input type="text" class="autoclear blur" value="your phone number" name="Phone" />

РЕДАКТИРОВАТЬ для ясности:

defaultInvalid - это пользовательский метод проверкииспользуется для проверки полей required input, в которые также предварительно введены некоторые данные по умолчанию.Поскольку это не поле required, нет смысла использовать этот метод.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...