html css срок действия не соответствует максимальной длине - PullRequest
Новая
       14

html css срок действия не соответствует максимальной длине

0 голосов
/ 07 марта 2020

Я играл с этим https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#Validation Где они подтверждают, что требуется входное значение перед отправкой формы при начальной загрузке страницы.

Как я могу выполнить ТОЧНО ту же самую вещь , но с maxlength на входном значении есть начальные данные, которые не должны быть действительными?

Вот jsFiddle, который я создал, чтобы увидеть это

. CSS

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 130px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
  background:red;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

html

<form novalidate>
  <div>
    <label for="uname">Has No Value: </label>
    <input type="text" id="name1" value='' name="name1" required>
        <span class="validity"></span>
  </div>


  <div>

<label for="uname">Has Value: </label>
    <input type="text" id="name2" value='hello' name="name2" required>
        <span class="validity"></span>
  </div>


  <div>
<label for="uname">Value is too long: </label>
    <input type="text" id="uname3" value='abcdefghijk' name="name3" 
    maxlength=5>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

1 Ответ

1 голос
/ 07 марта 2020

Вы можете дополнительно использовать атрибут pattern. Атрибут pattern проверяет, соответствует ли значение входа условиям, указанным в RegExp. 

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 130px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
  background:red;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}
<!--
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
-->

<form novalidate>
  <div>
    <label for="uname">Has No Value: </label>
    <input type="text" id="name1" value='' name="name1" required>
        <span class="validity"></span>
  </div>


  <div>

<label for="uname">Has Value: </label>
    <input type="text" id="name2" value='hello' name="name2" required>
        <span class="validity"></span>
  </div>


  <div>
<label for="uname">Value is too long: </label>
    <input type="text" id="uname3" value='abcdefghijk' name="name3" 
    pattern='.{0,6}' maxlength='6'>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
...