0

Using a simple form like that, how to watch if it can be submitted?

<form action="/action_page.php">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit">
</form>

I mean, if some inputs are using pattern and / or required, how to know if the whole form is ok to be submitted?

I’ve found the oninvalid attribute for a specific input. It is possible to use an onvalid on the <form> element?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Sergio Carvalho
  • 27
  • 5
  • [`requestSubmit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit). Also, inline event handlers like `oninvalid` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Apr 03 '21 at 20:00
  • Using `requestSubmit` I can only can a "validate and submit", I want to only "native validate" and return if the form is ready to be submitted, but don't submit already – Sergio Carvalho Apr 03 '21 at 20:14
  • 2
    Or [`reportValidity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) or any other methods discussed in [Constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) and [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). – Sebastian Simon Apr 03 '21 at 20:18
  • Yes! `reportValidity` is exactly what I need! I have done an [example Pen](https://codepen.io/sergiooak/pen/PoWmdOM) Could you post an Answer to me to mark it as the solution? – Sergio Carvalho Apr 03 '21 at 20:30
  • 1
    Duplicate of [Trigger standard HTML5 validation (form) without using submit button?](https://stackoverflow.com/q/7002230/4642212). – Sebastian Simon Apr 03 '21 at 20:34

1 Answers1

0

You can do something like this:

<form action="/action_page.php" onsubmit="submit()">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" placeholder="Three letter country code"><br /><br />
  <input type="submit" value="load">
</form>

<script type='text/javascript'>
    fuction submit(){
        //get the value of the input 
        var code = document.getElementById('country_code').value;
        //use a regular expression
        var expression  = [A-Za-z]{3};
        if(!expression.test(code)){
            //when returning false the form will not be sent 
            return false;
        }
        else{
            //when returning true the form will be sent 
            return true;
        }
    }
</script>

You can do this for all fields although there are more ways this can serve you

Gabriel Perez
  • 1
  • This form I would need to loop through all the inputs, I found the solution it is: [`reportValidity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) – Sergio Carvalho Apr 03 '21 at 20:32