Czy mogę oznaczyć pole jako nieprawidłowe z javascript?

Czytając ten post odkryłem, że istnieje kilka pseudoklas dla „prawidłowych” i „nieprawidłowych” wartości wejściowych wprowadzonych do HTML5.

Czy istnieje sposób, aby oznaczyć pole wejściowe jako nieprawidłowe / prawidłowe w javascript? Lub alternatywnie, czy mogę zastąpić użytą metodę walidacji?

W tym celu możesz użyć funkcji customValidity.

Jeśli dodasz komunikat customValidity do pola, stanie się on nieprawidłowy. Gdy ustawisz wiadomość jako pusty ciąg, stanie się ponownie ważna (chyba że jest nieważna z innych powodów).

field.setCustomValidity("Invalid field."); sprawi, że pole będzie nieprawidłowe.

field.setCustomValidity(""); sprawi, że pole będzie prawidłowe, chyba że nie spełni ograniczenia HTML5.

Edycja : ktoś wyjaśnił, że szukasz „prawidłowych” „nieprawidłowych” atrybutów DOM.

Dodałbym atrybuty do każdego tagu za pomocą dom_object.setAttribute("isvalid", "true"). Możesz również mieć centralną funkcję walidacji, która aktualizuje te atrybuty za każdym razem (i za dom_object.getAttribute("isvalid")każdym razem).

Możesz uruchomić tę funkcję za każdym razem, gdy element traci fokus lub kiedy chcesz.

Niezupełnie eleganckie, ale niestety nie ma teraz wsparcia „pseudo” w javascript i HTML5.

Jeśli rozumiem Twoje pytanie, możesz przeprowadzić walidację za pomocą JavaScript. Należy jednak pamiętać, że bardzo łatwo jest ominąć weryfikację po stronie klienta, zwłaszcza walidację javascript . Nigdy nie powinieneś ufać danym klienta i zawsze sprawdzaj po stronie serwera.

Na przykład, mogłem łatwo znaleźć identyfikatory elementów, sprawdzając kod źródłowy, a następnie document.getElementById('some_id').setAttribute('max', new_number)zmienić wartość maksymalną (był to jeden z wpisów z twojego linku).

Można to zrobić na różne sposoby, więc spróbuję podać ogólny idiom.

Możesz pobrać wartość, robiąc document.getElementById('form_element_id').value(upewnij się, że podałeś formularz, namektóry jest wysyłany na serwer i idktóry jest używany przez javascript). W przypadku obszarów tekstowych możesz użyć .innerHTML.

Następnie masz wartość w zmiennej, są różne sposoby, aby to sprawdzić.

Na przykład możesz to zrobić if (parseInt(my_value) < 0) //error. Możesz także użyć wyrażeń regularnych, nie wyjaśnię wszystkiego, ale możesz zacząć tutaj http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Wiem, że w3schools nie jest najlepszym źródłem, ale uważam, że to dobre miejsce na rozpoczęcie.

A teraz część dotycząca walidacji: dodaj onsubmit="return validateForm()do swojego tagu formularza, gdzie validateForm () jest funkcją, która wykonuje wszystkie sprawdzenia. Funkcja po prostu zwraca, truejeśli jest prawidłowa i falsenie. To zastępuje domyślną funkcję walidacji (który domyślnie nic nie robi).

Więc w powyższym przykładzie //errorzostanie zastąpiony przez return false. Możesz też robić inne rzeczy; takie jak ostrzeżenie o błędzie, a następnie zwróć false. Możesz również użyć javascript, aby podświetlić nieprawidłowe pola (nie wiesz, czy to właśnie masz na myśli, mówiąc „ oznacz pole wejściowe jako nieprawidłowe / prawidłowe z javascript ”)

Oczywiście, jeśli nie chcesz sprawdzać wszystkich pól, musisz zwrócić prawdę tylko wtedy, gdy niektóre z nich przejdą pomyślnie. Ponownie, nie powinieneś na tym polegać, ale jeśli chcesz tylko odstraszyć przeciętnych ludzi, to jest to łatwe rozwiązanie.

Czy istnieje sposób, aby oznaczyć pole wejściowe jako nieprawidłowe / prawidłowe w javascript?

Niestety, w JavaScript nie można stylizować pseudoklas, ponieważ nie są one prawdziwymi elementami, nie istnieją w rzeczywistym modelu DOM.

Z waniliowym JavaScriptem użyjesz walidacyjnego API .

W jQuery możesz to po prostu zrobić, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

Lub alternatywnie, czy mogę zastąpić użytą metodę walidacji?

Jeśli korzystasz z walidacji HTML5, trzymaj się znaczników. W przeciwnym razie możesz wyłączyć walidację HTML5 $form.attr('novalidate', 'novalidate')i użyć JS do walidacji pól, a następnie dodać validlub invalidklasy w razie potrzeby. Stworzyłem wtyczkę, która działa w ten sposób, aby obsługiwać przeglądarki inne niż HTML5.