1

Tenho um formulário com vários campos que são obrigatórios. Ao clicar em enviar, é realizada a validação usando jquery validation e estando ok, envia para o controller (ASP.Net MVC).

Eu preciso que após a validação do formulário, exiba um modal com um contrato (arquivo PDF) e caso o usuário aceite, chame a controller.. caso negativo, impede o submit.

[Edit] Vou postar abaixo o que já tenho

//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>
2
  • O que você já fez? Pode o código, assim fica mais fácil saber o caminho que está seguindo. Commented 8/08/2018 às 17:18
  • Editei a pergunta original com o que já tenho. Obrigado. Commented 8/08/2018 às 19:00

2 Respostas 2

1

Você pode manipular o seu formulário verificando se o mesmo é válido através do método valid e em seguida com o modal aberto, caso o usuário clique no botão aceite você pode enviar o seu formulário através do método submit. Caso contrário o modal será fechado e o formulário não será enviado.

$("#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>

1
  • Muito obrigado Netinho! Ajudou demais! Grande Abraço! Commented 8/08/2018 às 22:52
-1

Use

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

2
  • Entendi.. Porém, fiquei com uma dúvida. Eu estou usando Required Validation na minha Model (ASP.Net MVC). Quando eu clico no sbmit o modal abre, mas antes de validar o form. Terei que fazer a validação apenas por jquery? Commented 8/08/2018 às 17:10
  • se vc esta usando jqueryvalidation, você pode fazer no front e no back, caso você esteja usando no back, terá que fazer um submit para retornar os errors Commented 8/08/2018 às 19:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .