JSFiddle - React, Tailwind, and code Playground

HTML

<style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>       
<form id="testform" action="/">
      <label>Required:
        <input id="required_input" required="">
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input id="pattern_input" pattern="[0-9][A-Z]{3}">
      </label><br>
      <label>Min (4):
        <input id="min_input" type="number" min="4">
      </label><br>
        <input type="submit" value="Submit Button" id="sbmt" />
    </form>
      <input type="button" value="Trigger click on submit button" id="test">
        <input type="button" value="Trigger form submit" id="test1">
          <input type="button" value="Run checkValidity" id="test2">

JavaScript

$("#test").click(function(){
  $("#sbmt").click();
})
$("#test1").click(function(){
  $("#testform").submit();
})
$("#test2").click(function(){
  alert($("#testform")[0].checkValidity() ? "valid": "not valid");
})