Why didn't required filter blank inputs for my code?

good night, I have a problem, to make submit in the input, even when they are empty send them and of course has the property required and send the data anyway and I do not know why, and are received by my php code, I'm using ajax, and as I'm a beginner do not know if this influences the operation.

my code HTML:

              <div class="form-group col-md-12">
                  <input  id="direction" type="text" name="direction" class="form-control" required placeholder="Dirección." />
              </div>
              <div class="form-group col-md-12">
                  <input  id="contact" type="text" name="contact" class="form-control" required placeholder="Contacto." />
              </div>
              <div class="form-group col-md-6">
                  <input  id="vendedor" type="text" name="vendedor" class="form-control" required placeholder="Vendedor." />
              </div>
              <div class="form-group col-md-6">
                  <input id="linea_cred"  type="text" name="linea_cred" class="form-control" required placeholder="Linea de credito" />
              </div>
              <div class="form-group col-md-4"> Duración pago
                  <input id="dur_cre"  type="text" name="dur_cr" value="30" class="form-control" required placeholder="Duración de credito." />
              </div>
              <div class="form-group col-md-4"> Credito disponible
                  <input id="cred_disp"  type="text" name="cred_disp" class="form-control" required placeholder="Credito disponible." />
              </div>

              <div class="form-group col-md-4"> TDA-ASIGNADA:
                  <select id="tda_asig"  type="text" name="tda_asig" class="form-control" required placeholder="tda_asignada." />
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=6>6</option>
                  </select>
              </div>
              <div class="form-group col-md-12">
          <input type="submit" id="agregar" style="width:240px; height:50px" class="btn btn-default btn-primary pull-right" value="enviar" />
              </div>
          </form>

my code js-ajax:

var agregarContacto = document.getElementById('agregar');
var formulario = document.getElementById('formulario_crear_usuario');

function crearUsuario() {
  var form_datos = new FormData(formulario);
  for([key, value] of form_datos.entries()) {
    console.log(key + ": " + value);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', action, true);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
          var resultado = xhr.responseText;
          console.log(resultado);
          var json = JSON.parse(resultado);
          if(json.respuesta == true) {
              registroExitoso(json);
              construirTemplate(json);
              var totalActualizado = parseInt(totalRegistros.textContent) + 1;
              totalRegistros.innerHTML = totalActualizado;
          }
      }
  }
  xhr.send(form_datos);
}