html css有效性在maxlength上失败

Question

I was playing with this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#Validation Where they validate that a required input value before the form is submitted when page initially loads.

How can I do the EXACT same thing but with a maxlength on an input value has initial data that should fail validity?

Here is a jsFiddle I created to see this

. 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>

Answer 1

You could additionally use the pattern attribute. The the pattern attribute checks if the value of an input meets the conditions stated in a 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>