error inputa - zmienianie wyglądu errora

Question

witam odrazu mówie.  error to dla mnie mamy input type='email' i wpisze  np mistmest342 ale nie dodam @gmail.com i wyskacza wtedy taki error ze brakuje czesci po @ i własnie teraz ogladam 7 odc kursu html i zaciekawiło mnie jak zmienic wygląd takiego errora

Answer 1

Nie da się. Jak chcesz customowy wygląd błędów, to musisz zrobić customową walidację.

Comments

tyle fajnych znaczników a sie nie da.....

---

Wszystko się da - wystarczy chcieć i wiedzieć gdzie grzebać 

---

no teoretycznie jak sie zmotywuje to zawsze mozna zrobic nowy jezyk dla tych errorów ....

---

choc zamiast jezyka przeglądarkan by≤a by do tego zadania lepsza

---

Zawsze można napisać nowy język tylko po to, żeby stworzyć w nim przeglądarkę.

Tylko po co, skoro można wziąć jedną z setek bibliotek JS, które ogarniają walidację naprawdę dobrze? Część z nich nawet korzysta z ficzerów HTML5.

---

dla satysfakcji oczywiscie

---

Uwierz mi, że pisanie własnej przeglądarki nawet nie leży przy satysfakcji ^^

---

mówiąc o satysfakcji mam na mysli satysfakcje tego ze to zrobiło sie i jak . z tego mozna miec satysfakcje

Answer 2

W pewnym sensie możesz wpłynąć nieco na treść komunikatów walidacji natywnej.

Sprawdź:

• validity property  [ 1 ]  [ 2 ]  [ 3 ]  [ 4 ]

• checkValidity method  [ 1 ]  [ 2 ]  [ 3 ]

• setCustomValidity

  <input type="number" 
         min="100" 
         max="200"
         step="0.5"
         maxlength="2"
         required
         oninput="reset(this)">
  <button onclick="test()">OK</button>
  
  <ul>
    <li>Naciśnij OK - gdy puste pole</li>
    <li>Wpisz sam znak minus "-" lub plus "+" lub kropka "." - Naciśnij OK</li>
    <li>Wpisz wartość mniejszą od 100 - Naciśnij OK</li>
    <li>Wpisz wartość większą od 200 - Naciśnij OK</li>
    <li>Wpisz wartość 100.55 - Naciśnij OK</li>
  </ul>
  
  <script>
    function reset(input) {
      input.setCustomValidity('');    
    }
    function test() {
      const input = document.querySelector('input');
      input.setCustomValidity('');
  
      if (input.value.trim() == '') {
        input.setCustomValidity('Mist, to pole nie może być puste');
        input.reportValidity();
        return;      
      }
      if (input.validity.rangeOverflow) { // (value > 200) 
        input.setCustomValidity('Mist, wartość nie może być większa niż 200');
        input.reportValidity();
        return;
      } 
      if (input.validity.rangeUnderflow) { // (value < 100)
        input.setCustomValidity('Mist, wartość nie może być mniejsza niż 100');
        input.reportValidity();
        return;      
      }
      if (input.validity.stepMismatch) {
        input.setCustomValidity('Mist, prawidłowa wartość to wielokrotność 0.5');
        input.reportValidity();
        return;      
      }    
    }
  </script>
  
  <style>
    input:valid {
      background-color: green;
    }
    input:invalid {
      background-color: red;
      color: white;
    }
  </style>

   

 

 

 

BTW,

sprawdź:

<input type="number" 
	   min="100" 
       max="200"
       step="0.5"
       maxlength="2"
       required>
<button onclick="test()">OK</button>

<ul>
  <li>Naciśnij OK - gdy puste pole</li>
  <li>Wpisz sam znak minus "-" lub plus "+" lub kropka "." - Naciśnij OK</li>
  <li>Wpisz wartość mniejszą od 100 - Naciśnij OK</li>
  <li>Wpisz wartość większą od 200 - Naciśnij OK</li>
  <li>Wpisz wartość 100.55 - Naciśnij OK</li>
</ul>

<p id="validation-message"></p>

<script>
  function test() {
    const input_ = document.querySelector('input'),
          validation_message = document.querySelector('#validation-message');
        
    if (!input_.checkValidity()) {
      validation_message.textContent = input_.validationMessage;
      return;
    } else {
      validation_message.textContent = '';
    }
  } 
</script>

<style>
  #validation-message:not(:empty) {
    width: 50%;
    padding: .25rem;
  }
  input:valid {
  	background-color: green;
  }
  input:not(:valid), /* input:invalid */
  input:not(:valid) ~ #validation-message {
    background-color: red;
    color: white;
  }
</style>

 

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <output id="email-validity"></output>
  <button type="submit">Submit</button>
</form>

<script>
  const form_ = document.querySelector('form')
  form_.addEventListener('submit', (e) => {
    e.preventDefault();

    const email_input = form_.querySelector('#email'),
          email_validity = form_.querySelector('#email-validity');

    email_validity.textContent = '';
    email_input.value = email_input.value.trim();

    if (email_input.value == '') {
      email_validity.textContent = 'Mist, pole nie może być puste';
      return;
    }
    if (!email_input.value.includes('@')) {
      email_validity.textContent = 'Mist, adres nie zawiera znaku @';
      return;
    }
    if (!/^[a-z0-9]/i.test(email_input.value)) {
      email_validity.textContent = 'Mist, pierwszy znak adresu jest niedozwolony.';
      return;      
    }
    if (!/^([a-z0-9._]{2,})/i.test(email_input.value)) {
      email_validity.textContent = 'Mist, adres zawiera mniej znaków niż 2';
      return;           
    }
    if (!/^([a-z0-9._]{2,})\@([a-z0-9-_]{1,})/i.test(email_input.value)) {
      email_validity.textContent = 'Mist, adres nie zawiera nazwy domeny';
      return;           
    }
    if (!/^([a-z0-9._]{2,})\@([a-z0-9.-_]{2,})\.[a-z]{2,}$/i.test(email_input.value)) {
      email_validity.textContent = 'Mist, w nazwie domeny brak rozszeżenia TLD (np: .pl, .com itp.)';
      return;           
    }

    // Wypisze inny komunikat błedu (natywny) jeżeli takowy zaistnieje, który dotyczy
    // danego pola type="typ pola", który nie został opisany wyżej w kodzie
    if (!email_input.checkValidity) {
      email_validity.textContent = email_input.validationMessage;
      return;
    } else {
      // wszystko w porządku
      form_.submit();
    }
  });
</script>

<style>
  input + output {
    display: block;
  }
  output {
    font: 700 .8rem/1 system-ui, monospace, sans-serif;
    color: orangered;
    padding: .5rem 0 0 6.5ch;
  }
  button {
    margin-top: 1rem;
  }
</style>

 

i na koniec sprawdź: 

• codepen?q=setCustomValidity

• 10 Best Pure JavaScript Form Validation Libraries (2024 Update)

Comments

dzieki