Получение нулевого значения при отправке формы

В моем текущем проекте я пытаюсь реализовать форму регистрации пользователя, но каждый раз, когда я пытаюсь отправить данные пользователя на сервер, объект модели остается с нулевым значением.

это моя форма:

<form class="form-container" id="form" method="post" th:object="${command}" th:action="@{/usuario/register}">
  <div class="form-row">
    <div class="col-75">
      <input type="text" th:field="*{username}" placeholder="Login"/>
    </div>
  </div>

  <div class="form-row">
    <div class="col-75">
      <input type="password" th:field="*{password}" placeholder="Senha"/>
    </div>
  </div>

  <div class="form-row">
    <div class="col-75">
      <input type="text" th:field="*{firstName}" placeholder="Nome"/>
    </div>
  </div>

  <div class="form-row">
    <div class="col-75">
      <input type="text" th:field="*{lastName}" placeholder="Sobrenome"/>
    </div>
  </div>

  <div class="form-row">
    <div class="col-75">
      <input type="email" th:field="*{email}" placeholder="E-mail"/>
    </div>
  </div>

  <div class="form-row">
    <div class="col-75">
      <button type="button" class="button" onclick="register();">Cadastre-se</button>
    </div>
  </div>

  <div class="alert-ok" id="ok" style="display: none;">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    <strong>Sucesso!</strong> Cadastro realizado com sucesso.
  </div>

  <div class="alert-error" id="error" style="display: none;">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    <strong>Erro!</strong> Não foi possivel realizar o cadastro.
  </div>
</form>

в контроллере у меня:

  @RequestMapping(value = "/register", method=RequestMethod.GET)
  public String formRegister(Model model) {
    model.addAttribute("command", new Usuario());
    return "register";
  }

  @RequestMapping(value = "/register", method=RequestMethod.POST)
  @ResponseBody
  public void doRegister(@ModelAttribute("usuario") Usuario object) throws Exception {
    this.serv.register(object);
  }

(Я также пробовал: doRegister(@Valid Usuario object, BindingResult result), но тоже не работает - та же проблема)

В моем классе обслуживания я получил этот код:

  public void register(Usuario novo) throws Exception {
    novo.setEnabled(true);
    novo.setLocked(false);
    novo.setCredenciais(new HashSet<Credencial>());
    Credencial credencial = credencialDao.findBy("nome", "web");
    novo.getCredenciais().add(credencial);
    this.dao.insert(novo);
  }

мой модельный класс:

@Entity
public class Usuario extends Model implements UserDetails {
  @Id
  @GeneratedValue(strategy=GenerationType.IDENTITY)
  private Integer id;

  @Column
  private String username;

  @Column
  private String password;

  @Column
  private String firstName;

  @Column
  private String lastName;

  @Column
  private String email;

  @OneToMany(fetch = FetchType.EAGER)
  private Set<org.loja.model.credencial.Credencial> credenciais;

  @Column
  private Date dataExpiracao;

  @Column
  private Boolean enabled;

  @Column
  private Boolean locked;

  @OneToOne(fetch = FetchType.EAGER)
  private org.loja.model.cesta.Cesta cesta;

  @OneToMany(fetch = FetchType.EAGER, mappedBy = "usuario")
  private Set<org.loja.model.pedido.Pedido> pedidos;
}

Кто-нибудь может увидеть, что здесь не так? Я застрял на несколько часов с этой проблемой, но не могу понять, что вызывает эту проблему. Я думаю, что код очень похож на другие коды, которые я искал в Интернете, обрабатывающие ту же операцию.

обновить

function register() {
  var formData = new FormData(document.getElementById("form"));
  var url = document.getElementById("form").action;

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.onload = function(event) {
    event.preventDefault();
    var result = this.responseText;
    if(result == "")
      document.getElementById("ok").style.display = 'block';
    else
      document.getElementById("error").style.display = 'block';
  };
  xhr.send(formData);
}