Display modal after form validation (fields filled)

Question

I have a form with several fields that are mandatory. By clicking submit, validation is performed using jquery validation and being ok, send to the controller (ASP.Net MVC).

I need that after the form validation, display a modal with a contract (PDF file) and if the user accepts, call the controller.. Negative case, prevents Submit.

[Edit] I will post down what I already have

//Model
public class Usuario
{
    [Required(ErrorMessage = "O produto é obrigatório!")]
    public int CodigoProduto { get; set; }

    [Required(ErrorMessage = "O email é obrigatório!")]
    [RegularExpression(@"^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$", ErrorMessage = "Digite um email válido!")]
    public string Email { get; set; }

    .
    .
    .
}

//View
<section class="section_formulario">
    <div class="container">
        <div class="seta-lateral hidden-xs"></div>
        @using (Html.BeginForm("Cadastro", "Home", FormMethod.Post, new { id = "formEntry" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="row">
                <div class="col col-12">
                    <p>
                        <label>Produto</label>
                        @Html.DropDownListFor(model => model.CodigoProduto, ViewBag.ProdutoId as IEnumerable<SelectListItem>, "Selecione", new { @class = "form-control validate" })
                        @Html.ValidationMessageFor(model => model.CodigoProduto, "", new { @class = "text-danger" })
                    </p>
                </div>
                <!-- /.col -->
                <div class="col col-lg-12">
                    <p>
                        <label>E-mail</label>
                        Informe seu e-mail principal.
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control validate" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </p>
                </div>
                <!-- /.col -->
            </div>
            <div class="separator separator-20"></div>
            <div class="row">
                <div class="col col-lg-12">
                    <input type="submit" id="modalContrato" name="salvar" class="btn btn-primary" value="Salvar" />
                </div>
                <!-- /.col -->
            </div>
        }
    </div>
</section>

<div class="modal" id="modal-alerta">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Cabeçalho do Modal -->
            <div class="modal-header">
                <h2>Contrato de Serviço</h2>
            </div>

            <!-- Corpo do Modal -->
            <div class="modal-body">
                <p>Conteúdo do contrato</p>
            </div>

            <!-- Rodapé do Modal -->
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                <button class="btn btn-success">Aceitar</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#modalContrato").click(function () {
            $("#modal-alerta").modal();
        });
    });
</script>

Answer 1

You can manipulate your form by checking if it is valid through the method Valid and then with the modal open, if the user click the button accepted you can send your form through the method Submit. Otherwise the modal will be closed and the form will not be sent.

$("#submit").on("click", function() {
  if ($("#form-login").valid()) { //Verifica se o formulário está válido.
    $('#myModal').modal('show'); //Se for válido, exibe o modal.
  }
});
$("#aceite").on("click", function() {
  $("#form-login").submit(); //Se for clicado no botão aceite é submetido o formulário
});
$("#form-login").validate({

  rules: {
    "email": {
      required: true,
      email: true
    },
    "senha": {
      required: true
    }
  },
  messages: {
    "email": {
      required: 'Campo e-mail é obrigatório',
      email: 'E-mail inválido'
    },
    "senha": {
      required: 'Campo senha é obrigatório'
    }
  }
});

#form-login {
  width: 800px;
  margin: 30px auto;
}

label {
  width: 140px;
  display: inline-block;
}

label.error {
  color: red;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<form id="form-login">
  <fieldset>
    <legend>Login</legend>
    <p>
      <label for="email">Seu Email</label>
      <input id="email" name="email" type="email" />
    </p>
    <p>
      <label for="senha">Senha</label>
      <input id="senha" name="senha" type="password" />
    </p>
    <p>
      <a id="submit" type="button" class="btn btn-primary">Login</a>
    </p>
  </fieldset>
</form>


<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Termos de aceite</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <p>Conteúdo do contrato</p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" id="aceite" class="btn btn-success">Aceite</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
      </div>

    </div>
  </div>
</div>

Answer 2

Use

$("#myform").validate({ submitHandler: function(form) { //showConfirmbox if(confirm) $(form).ajaxSubmit(); } });