Submitting form with a button not checking the 'required'attribute?

1

So I have an HTML Form code as followed,

<form id="register-account-form" action="?" method="POST">
          <div class="form-group">
            <label for="username">Desired Username:</label>
            <input type="text" class="form-control" id="username" required />
          </div>
          <div class="form-group">
            <label for="domainname">Domain (you can add a custom one later):</label>
            <select class="form-control" required>
              <option value="example.com">
                maimail.co
              </option>
            </select>
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" required />
          </div>
          <div class="form-group">
            <label for="recoveryemail">Recovery Email:</label>
            <input type="email" class="form-control" id="recoveryemail" required />
          </div>
          <div class="form-group">
            <button type="submit" class="g-recaptcha btn btn-primary" data-sitekey="" data-callback='onSubmit' class="form-control" id="submitButton">Submit</button>
            <br /><br /><i>By submitting this form you agree to our <a href="tos.html">terms of service</a></i>
          </div>
        </form>

Inline JS:

<script>
    function onSubmit(token) {
      document.getElementById("register-account-form").submit();
    }
    </script>

External JS:

$(document).ready(function() {
    $.getJSON("api/sitekey", function(json) {
      $('#submitButton').attr('data-sitekey', json['sitekey']);
    });

    setTimeout($.getScript("https://www.google.com/recaptcha/api.js"), 10000);

});

When I press submit it doesn’t check if required fields are filled out. I’m using Google’s Invisible Nocaptcha so it needs a button rather than submit input. Is there anyway to fix this problem? Due to the dynamic nature of this script a Codepen isn’t possible however you can view full source at the link below:
https://github.com/nsuchy/MyMail-Control-Panel
Incase you are curious, this is a script I’m writing to allow anyone to start their own email provider and it’s written on top of iRedMail for ease of configuration.

2

Hey. It seems that changing the button’s data-attribute breaks the HTML5 validation, so you could try binding it to a <div> like the docs suggest.

Basically you’ll have to remove all the data-attributes (and class) relative to the recaptcha from your button and create a div like this:

<div class="g-recaptcha"
  data-sitekey=""
  data-callback="onSubmit"
  data-size="invisible">
</div>

And, in your .ready() method, you’ll have something like this:

$('#register-account-form').submit(function() {
  grecaptcha.execute();
});
onSubmit = function(token) {
  // Do stuff with the token
}
$.getJSON("/api/key", function(json) {
  $('div.g-recaptcha').attr('data-sitekey', json['sitekey']);
  $.getScript('https://www.google.com/recaptcha/api.js');
});

Also, I went ahead and put the getScript inside the success callback of the getJSON, which seems to work better. You can see a fiddle here with some fake data.