Thread View: pl.comp.lang.javascript
1 messages
1 total messages
Started by jivanmukta
Mon, 22 Sep 2014 15:17
walidacja w jQuery, problem ze znacznikami klasy .error
Author: 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.
Thread Navigation
This is a paginated view of messages in the thread with full content displayed inline.
Messages are displayed in chronological order, with the original post highlighted in green.
Use pagination controls to navigate through all messages in large threads.
Back to All Threads