Invalid input not shown until submitted

Question

I want to have my :invalid or :required selector to be invisible until submitting.

The example of my question shown below:

input[type=text]:invalid {
    border: red solid 1px;
}

<figure class="fig">
    <label>
        <div class="order">4</div>
        <p>If the Answer to Question 2 is Yes How Many Blocks are
           included (A Form Should be Completed for Each Block)
            <span class="asterisk">&#42;</span>
        </p>
    </label>
    <br>
    <input type="text" name="number_of_blocks"
           placeholder="Enter number of blocks"  
           required="required">
    <br>
</figure>

Example image

The :invalid pseudoclass is already visible before I start to fill the form, which doesn't look nice. How can I make it only becombe visible after submission?

I found something here:

Form hidden field and required validation use

Though this was not was I was looking for, as it doesn't contain the CSS I'm searching for.

make it `input[type=text].submited:invalid {...}` and apply class `submited` to inputs when you submit your form — ciekals11, Jun 11 '21 at 13:44
Looks good, but how to apply class submitted to inputs when I submit my form? — Geographos, Jun 11 '21 at 13:46
listen for `submit` event on your form. Here is an [example](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). And when you catch that event just apply said class to all inputs in given form — ciekals11, Jun 11 '21 at 20:06

score 1 · Answer 1 · answered Jun 11 '21 at 13:47

You'll have to use JavaScript to loop through all the input fields and check the validity of each one.

$('#form').on('submit', function(e) {
  var isValid = true;
  $('input', $(this)).each(function() {
    if (!$(this)[0].checkValidity()) {
      isValid = false;
      $(this).addClass('invalid');
    }
  })
  return isValid;
})

.invalid {
  border: red solid 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" novalidate>
  <figure class="fig">
    <label>
        <div class="order">4</div>
        <p>If the Answer to Question 2 is Yes How Many Blocks are Included (A Form Should be Completed for Each Block)<span class="asterisk">&#42;</span></p>
    </label>
    <br>
    <input type="text" name="number_of_blocks" placeholder="Enter number of blocks" required="required">
    <br>
  </figure>
  <button>Submit form</button>
</form>

Invalid input not shown until submitted

1 Answers1