Modal display after form validation (filled fields)

Question

Modal display after form validation (filled fields)

Navigation

#1 by (0 votes)
#2 by (-1 votes)

0

I have a form with several fields that are required. When you click send, the validation is performed using jquery validation and being ok, it sends to the controller (ASP.Net MVC).

I need to validate the form after the form validation, display a modal with a contract (PDF file) and if the user accepts, call the controller. If negative, it prevents the submit.

[Edit] I'll post below 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>

jquery twitter-bootstrap asp.net-mvc jquery-validate

asked by anonymous 08.08.2018 / 18:12

2 answers

-1

Use

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

08.08.2018 / 18:21

Run an XMLA query using WebApi from C # Php - multidimensional array using for or foreach

score 0 · Accepted Answer

You can manipulate your form verifying that it is valid through the valid method and then with the modal open if the user clicks the accepted button you can submit your form using the submit method. 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><scriptsrc="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><linkhref="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>