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

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


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 class="form-group">
            <label for="domainname">Domain (you can add a custom one later):</label>
            <select class="form-control" required>
              <option value="">
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" required />
          <div class="form-group">
            <label for="recoveryemail">Recovery Email:</label>
            <input type="email" class="form-control" id="recoveryemail" required />
          <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>

Inline JS:

    function onSubmit(token) {

External JS:

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

    setTimeout($.getScript(""), 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:
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.


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"

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

$('#register-account-form').submit(function() {
onSubmit = function(token) {
  // Do stuff with the token
$.getJSON("/api/key", function(json) {
  $('div.g-recaptcha').attr('data-sitekey', json['sitekey']);

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.