🚀 go-pugleaf

RetroBBS NetNews Server

Inspired by RockSolid Light RIP Retro Guy

Article View: pl.comp.lang.javascript
Article #51456

walidacja w jQuery, problem ze znacznikami klasy .error

#51456
From: jivanmukta
Date: Mon, 22 Sep 2014 15:17
105 lines
6910 bytes
Tak mam skonstruowany kod, że przeszkadzają mi istniejące znaczniki klasy .error, jeśli nie ma błędów walidacji client-side w jQuery (wówczas przycisk submit powinien uzyskać status enabled). 
Jeśli np. użytkownik w polu klasy .phone wpisze niepoprawny telefon, pojawi się komunikat błędu walidacji (znacznik klasy .error), a jak numer telefonu poprawi to znacznik .error czasami mi nie znika, przez co funkcja animateButton('submit_contact'), sprawdzająca czy są jakieś znaczniki .error, pokazuje nadal przycisk submit w stanie disabled, a powinna zmienić na enabled. Nie wiem dlaczego czasami znaczniki klasy .error nie są automatycznie usuwane po korekcie przez użytkownika wartości w polu, więc usuwam je ręcznie. Robię to tak:

function removeError(element, ok) {
    var id, name;
    if (element.getAttribute("id")) {
        id = element.getAttribute("id");
    } else if (element.getAttribute("name")) {
        name = element.getAttribute("name");
    }
    if (ok) {
        $(element).next('span.error').remove();
        if (id !== undefined) {
            $("label#" + id + "-error.error").remove();
        }
        if (name !== undefined) {
            $("label#" + name + "-error.error").remove();
        }
    }
    return ok;
}

Czy ktoś wie dlaczego jQuery nie usuwa zawsze wszystkich znaczników klasy .error po korekcie wartości w polu? A może ja czegoś nie rozumiem, robię coś źle i dlatego nie znikają? Biblioteki jQuery używam tak:

<head>
    ...
    <link href="<?php rs_css('styles'); ?>" rel="stylesheet" type="text/css">
    <script src="<?php rs_js('functions'); ?>" type="text/javascript"></script>
    <script src="<?php rs_js('animations'); ?>" type="text/javascript"></script>
    <script src="<?php rs_js('jquery-2.1.1.min'); ?>" type="text/javascript"></script>
    <script src="<?php rs_js('jquery-migrate-1.2.1.min'); ?>" type="text/javascript"></script>
    <script src="<?php rs_js('jquery.validate.min'); ?>" type="text/javascript"></script>
    <script src="<?php rs_js('functions_jquery'); ?>" type="text/javascript"></script>
    <script type="text/javascript">
        var vulgarWords = <?php echo $vulgarWords; ?>;
        $(document).ready(function () {
            contactEventHandlers();
            validation('contact');
            animations('submit_contact');
        });
    </script>
</head>

gdzie contactEventHandlers(), validation(), animations() to:

function contactEventHandlers() {
    'use strict';
    $('#contact').submit(submitContact);
    $('#message').keyup(function () { return onKeyUpAtTextArea('message'); });
}

function validation(formName) {
    'use strict';
    $.validator.addMethod("number_real", function (numberVal, element) {
        numberVal = numberVal.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || numberVal.match(/^\d+(\.\d+)?$/));
    }, "Wpisz poprawną liczbę rzeczywistą nieujemną");
    $.validator.addMethod("number_natural", function (numberVal, element) {
        numberVal = numberVal.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || numberVal.match(/^\d+$/));
    }, "Wpisz poprawną liczbę całkowitą nieujemną");
    $.validator.addMethod("email_address", function (emailAddr, element) {
        emailAddr = emailAddr.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || emailAddr.match(/^[0-9a-z-\!\#\$\%\&\_\-]([\.]?[0-9a-z-\!\#\$\%\&\_\-])*\@[0-9a-z-\!\#\$\&\_\-]([\.]?[0-9a-z-\!\#\$\%\&\_\-])*$/));
    }, "Wpisz poprawny adres e-mail");
    $.validator.addMethod("mobile", function (mobileNumber, element) {
        mobileNumber = mobileNumber.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || mobileNumber.match(/^\d{3}-?\d{3}-?\d{3}$/));
    }, "Podaj poprawny numer komórkowy");
    $.validator.addMethod("direction", function (directionNumber, element) {
        directionNumber = directionNumber.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || directionNumber.match(/^\d{2}$/));
    }, "Podaj poprawny numer kierunkowy");
    $.validator.addMethod("phone", function (phoneNumber, element) {
        phoneNumber = phoneNumber.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || phoneNumber.match(/^\d{2,3}-?\d{2}-?\d{2}$/));
    }, "Podaj poprawny numer telefonu");
    $.validator.addMethod("price", function (price, element) {
        price = price.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || price.match(/^\d+(\.\d{1,2})?$/));
    }, "Podaj poprawną kwotę");
    $.validator.addMethod("number_letter", function (text, element) {
        text = text.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || text.match(/^\d+[a-zA-Z]?$/));
    }, "Wpisz liczbę opcjonalnie zakończoną pojedynczą literą");
    $.validator.addMethod("long_text", function (text, element) {
        text = text.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || null === findInArray(vulgarWords, text));
    }, "Proszę nie wpisywać wulgaryzmów");
    $.validator.addMethod("datePL", function (strDate, element) {
        strDate = strDate.replace(/\s+/g, "");
        return removeError(element, this.optional(element) || isCorrectDate(strDate));
    }, "Proszę wprowadzić poprawną datę");
    $("#" + formName).validate();
}

function animations(submitButton) {
    animateButton(submitButton);
    animateMainTitle();
    animateIntro('to_read');
    $('#slideshow img:first').css({opacity: 0.0}).addClass('active');
    slideSwitch();
}

Byłbym wdzięczny za wytłumaczenie.
Technical Details
Message-ID: <e5adef8a-55cc-40a9-97d2-b4e9038933ed@googlegroups.com>
Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed.pionier.net.pl!news.glorb.com!h15no4032136igd.0!news-out.google.com!q8ni28qal.1!nntp.google.com!w8no11386qac.0!postnews.google.com!glegroupsg2000goo.googlegroups.com!not-for-mail

Show Full Headers
Complete Article Headers
X-Received: by 10.42.152.201 with SMTP id j9mr26171126icw.5.1411399060856;        Mon, 22 Sep 2014 08:17:40 -0700 (PDT)
X-Received: by 10.140.23.228 with SMTP id 91mr8956qgp.19.1411399060702; Mon, 22 Sep 2014 08:17:40 -0700 (PDT)
Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed.pionier.net.pl!news.glorb.com!h15no4032136igd.0!news-out.google.com!q8ni28qal.1!nntp.google.com!w8no11386qac.0!postnews.google.com!glegroupsg2000goo.googlegroups.com!not-for-mail
Newsgroups: pl.comp.lang.javascript
Date: Mon, 22 Sep 2014 08:17:40 -0700 (PDT)
Complaints-To: groups-abuse@google.com
Injection-Info: glegroupsg2000goo.googlegroups.com; posting-host=83.31.204.16; posting-account=Fd8BNwoAAACl8PCi6-fI0bkHGOgt6LMa
NNTP-Posting-Host: 83.31.204.16
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <e5adef8a-55cc-40a9-97d2-b4e9038933ed@googlegroups.com>
Subject: walidacja w jQuery, problem ze znacznikami klasy .error
From: jivanmukta@poczta.onet.pl
Injection-Date: Mon, 22 Sep 2014 15:17:40 +0000
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit