Mam formularz, który próbuję zweryfikować za pomocą HTML 5 (i jQuery). Formularz zawiera wartości początkowe, które są ładowane z bazy danych. Użytkownicy mogą edytować dane, a następnie przesłać formularz. Mam pole wejściowe z maksymalną długością ustawioną na 6, ale czasami wartość pobrana z bazy danych ma więcej niż 6 znaków. Jeśli użytkownik nic nie zrobi i po prostu kliknie przycisk Prześlij, chcę otrzymać ostrzeżenie dotyczące weryfikacji HTML 5. Ale formularz jest przesyłany bez ostrzeżenia
<form id="checkValues" method="post">
<input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" pattern="{0,6}">
<button class="btn btn-primary" type="submit">Update</button>
</form>
Próbowałem dodać wzór {0,6}, ale to nie robi żadnej różnicy. Nie chcę, aby formularz automatycznie usuwał znaki, użytkownik musi to zrobić. Próbowałem użyć walidacji jQuery, ale nie sądzę, że robię to poprawnie:
$(window).on("load", function() {
const $reading01 = document.querySelector('#reading01');
$reading01.validate();
}
3 odpowiedzi
Jeśli znormalizujesz <button> (tj. nadasz mu type="button" zamiast type="submit"), możesz skorzystać z interfejsu API ograniczeń HTML5 do walidacji formularzy.
Interfejs API ograniczeń HTML5 umożliwia zdefiniowanie własnych ograniczeń weryfikacji.
Po zatwierdzeniu formularza możesz użyć submit(), aby przesłać formularz.
Przykład roboczy:
const checkValuesForm = document.getElementById('checkValues');
checkValuesFormSubmitButton = checkValuesForm.querySelector('[data-type="submit"]');
const checkValues = (formSubmitted = false) => {
const reading01 = document.getElementById('reading01');
if (reading01.value.length > 6) {
reading01.setCustomValidity('This number cannot be more than 6 digits long');
reading01.reportValidity();
}
else {
reading01.setCustomValidity('');
if (formSubmitted === true) {
checkValuesForm.submit();
}
}
}
checkValuesFormSubmitButton.addEventListener('click', () => checkValues(true), false);
reading01.addEventListener('keyup', checkValues, false);
window.addEventListener('load', checkValues, false);<form id="checkValues" method="post">
<input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" />
<button class="btn btn-primary" type="button" data-type="submit">Update</button>
</form>Dalsze czytanie
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
- https://www.sitepoint.com/using-the-html5-constraint-api-for-form-validation/
Wystarczy wyświetlić ostrzeżenie lub uniemożliwić dalsze działania, w takim przypadku możesz przeprowadzić własną weryfikację, pobierając id i sprawdzając, czy jest pusty, czy nie.
Jak powiedział Rounin, Jesus Monica, użycie setCustomValidity jest najczystszym sposobem na wysłanie wiadomości informującej o błędzie na wejściu. Mimo to, ponieważ używasz przycisku submit, możesz wysłuchać zdarzenia submit formularza i zweryfikować je przed wysłaniem żądania. Możesz także użyć Document.forms Właściwość tylko do odczytu, która zwraca kolekcję HTMLFormElement. Podoba mi się to, jak wygląda kodowo, ponieważ bardzo łatwo zrozumieć, że pracujesz z formularzem.
const form = document.forms['checkValues'];
form.addEventListener('submit', (e) => {
e.preventDefault();
const validatedInput = form.elements['reading01'];
if (validatedInput.value.length > 6) {
validatedInput.setCustomValidity("The input value cannot be longer than 6.");
return;
}
form.submit();
});<form id="checkValues" method="post">
<input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" pattern="{0,6}">
<button class="btn btn-primary" type="submit">Update</button>
</form>Jeszcze jedna rzecz, a to tylko osobisty gust, podczas nazywania zmiennych zwykle dodaję symbol $ dla elementów jQuery. Więc jeśli przypadkiem używam biblioteki jQuery, mogę zidentyfikować, która zmienna zawiera zwykły element javascript, a która element jQuery.