Article View: pl.comp.lang.javascript
Article #51456walidacja w jQuery, problem ze znacznikami klasy .error
From: jivanmukta
Date: Mon, 22 Sep 2014 15:17
Date: Mon, 22 Sep 2014 15:17
105 lines
6910 bytes
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-mailShow 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