Close modal when submitting my form

Question

I have a modal to send form, when I click save should appear a message saying that the user was successfully registered and close the modal, but neither is happening.

<script type="text/javascript">

$('#formNovo').validate({
  rules: {
    Nome: {
      required: true,
      minlength: 5
    },

    Email: {
      required: true,
      email: true
    }
  },

  messages: {
    txtNome: "Um nome e necessario e com mais de três letras",
    txtEmail: "Insira um endereço de E-mail válido"
  },

  submitHandler: function(formNovo) {
    var usuario = {
      Nome: $("#Nome").val(),
      Email: $("#Email").val()
    };

    $.ajax({
      url: "/Usuario/Adicionar",
      cache: false,
      data: new FormData(document.getElementById("formNovo")),
      contentType: false,
      processData: false,
      method: "POST",
      success: function(dados) {
        $("#divAlert").text("Usuario cadastrado com sucesso!")[0].className = "alert alert-success";

        setTimeout(function() {
          $('#divAlert').text("")[0].className = "hidden";

        }, 1000);

        document.getElementById('Nome').value = '';
        document.getElementById('Email').value = '';
        $("#modalNovo").modal('hide');
        atualizarGrid();
      },

      error: function() {
        $("#divAlert").text("Erro ao realizar o cadastro...")[0].className = "alert alert-danger";
      }
    });
  }
});

</script>

<div id="modalNovo" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form class="container-fluid" id="formNovo">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Novo cadastro</h3>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="Nome">Nome</label>
            <input type="text" class="form-control" id="Nome" name="Nome" maxlength="30" />
          </div>

          <div class="form-group">
            <label for="Email">E-mail</label>
            <input type="text" class="form-control" id="Email" name="Email" placeholder="[email protected]" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success btn-block" id="btnSalvar">Salvar</button>
          <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

You can put the attributes on the submite button data-toggle="modal" data-target="#modalNovo" as code below.

<div id="modalNovo" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form class="container-fluid" id="formNovo">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Novo cadastro</h3>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="Nome">Nome</label>
            <input type="text" class="form-control" id="Nome" name="Nome" maxlength="30" />
          </div>

          <div class="form-group">
            <label for="Email">E-mail</label>
            <input type="text" class="form-control" id="Email" name="Email" placeholder="[email protected]" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success btn-block" id="btnSalvar" data-toggle="modal" data-target="#modalNovo">Salvar</button>
          <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

Or you can use the bootstrap function via jQuery $('#modalNovo').modal('hide') as the code below:

submitHandler: function(formNovo) {
    var usuario = {
      Nome: $("#Nome").val(),
      Email: $("#Email").val()
    };

    $('#modalNovo').modal('hide'); //add essa linha

    $.ajax({
      url: "/Usuario/Adicionar",
      cache: false,
      data: new FormData(document.getElementById("formNovo")),
      contentType: false,
      processData: false,
      method: "POST",
      success: function(dados) {
        $("#divAlert").text("Usuario cadastrado com sucesso!")[0].className = "alert alert-success";

        setTimeout(function() {
          $('#divAlert').text("")[0].className = "hidden";

        }, 1000);

        document.getElementById('Nome').value = '';
        document.getElementById('Email').value = '';
        $("#modalNovo").modal('hide');
        atualizarGrid();
      },

      error: function() {
        $("#divAlert").text("Erro ao realizar o cadastro...")[0].className = "alert alert-danger";
      }
    });
  }
});

I hope I’ve helped.