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();
}
2
DaveP 19 listopad 2019, 14:56
Spróbuj zweryfikować go za pomocą Jquery, przechwytując wartość, a następnie sprawdzając, czy jest pusta, czy nie.
 – 
Prabhjot Singh Kainth
19 listopad 2019, 14:59
Sprawdź wartość, dodając, czy warunek w jquery może ci pomóc. zmienna wartość = $(to).val(); if ( wartość.długość > 6
 – 
supriya suresh g
19 listopad 2019, 15:14

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

1
Community 20 czerwiec 2020, 12:12

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.

0
Nikki Nikhil 19 listopad 2019, 15:04

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.

0
Alain Cruz 19 listopad 2019, 15:45