title: validate and submit html form required inputs using javascript
body: <p>I have a form which contains inputs with <code>required</code> tag. It normally validates when I click on an input of type <code>submit</code>.</p>
  <p>But I wanted to be able to initiate that process programmatically using javascript. or when an element outside of the form is clicked.</p>
  <p><strong>Is this possible? how can I do this?</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function validateAndSubmit(){
    //what can I do here to initiate same process?
    
    //tried
  
    document.querySelector("form").submit() //this one submits without validating
  
    document.querySelector("#submitter").click() //no such function as this
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input required placeholder="name"/&gt;
    &lt;input id="submitter" type="submit"/&gt;
  &lt;/form&gt;
  
  &lt;button onClick=validateAndSubmit()&gt;Send&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to do this from other event handler functions too. Is there a way to do this?</p>
  <p>Thanks</p>