Formularz HTML - atrybut "novalidate"

Spójrzmy na następujący kod HTML:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Jakie jest Twoje imię?
      <input type="text" name="imie" required>
    </label>
  </p>

  <p>
    <label>
      Podaj dowolny ciąg znaków:
      <input type="text" name="ciag-znakow" minlength="6" required>
      <small>(minimalnie 6 znaków)</small>
    </label>
  </p>

  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba" pattern="[0-9]{4}" required>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Jakie jest Twoje imię?

Podaj dowolny ciąg znaków: (minimalnie 6 znaków)

Podaj czterocyfrową liczbę:

zatwierdź

Nasz przykładowy kod HTML reprezentuje formularz HTML, który z kolei reprezentowany jest przez element form.

W zawartości naszego przykładowego formularza HTML występują trzy elementy HTML, które mogą przechowywać informację wprowadzoną przez użytkownika.

Wspomnianymi elementami HTML są elementy input.

Żadna wartość posiadana przez daną, która reprezentowana jest przez jakikolwiek nasz przykładowy element input nie może być wartością pustą przed próbą zatwierdzenia formularza HTML, z którym to formularzem HTML zostały powiązane wspomniane elementy input, ponieważ do każdego wspomnianego elementu input został dodany atrybut logiczny required.

Wartość posiadana przez daną, która reprezentowana jest przez nasz przykładowy element input posiadający atrybut name o wartości ciag-znakow musi składać się przynajmniej z sześciu znaków przed próbą zatwierdzenia formularza HTML, z którym to formularzem HTML został powiązany wspomniany element input, ponieważ do wspomnianego elementu input został dodany atrybut minlegth wraz z wartością 6.

Wartość posiadana przez daną, która reprezentowana jest przez nasz przykładowy element input posiadający atrybut name o wartości liczba musi składać się dokładnie z czterech znaków (którymi muszą być wyłącznie cyfry z zakresu od 0 do 9) przed próbą zatwierdzenia formularza HTML, z którym to formularzem HTML został powiązany wspomniany element input, ponieważ do wspomnianego elementu input został dodany atrybut pattern wraz z wartością [0-9]{4}.

Jeżeli z jakiejś przyczyny wszystkie wyżej wymienione dodatkowe mechanizmy walidujące (sprawdzające) wartości posiadane przez dane formularza HTML chcemy wyłączyć, wtedy do interesującego nas formularza HTML reprezentowanego przez element form należy dodać atrybut logiczny novalidate.

Przykład:

<form action="https://webkod.pl/php/submit-result.php" novalidate>
  <p>
    <label>
      Jakie jest Twoje imię?
      <input type="text" name="imie" required>
    </label>
  </p>

  <p>
    <label>
      Podaj dowolny ciąg znaków:
      <input type="text" name="ciag-znakow" minlength="6" required>
      <small>(minimalnie 6 znaków)</small>
    </label>
  </p>

  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba" pattern="[0-9]{4}" required>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Jakie jest Twoje imię?

Podaj dowolny ciąg znaków: (minimalnie 6 znaków)

Podaj czterocyfrową liczbę:

zatwierdź