3

Estou usando http://www.bootstraptoggle.com/, um simples toggle de true ou false.

Aqui está o código:

View:

<form id="myform">
    @Html.CheckBoxFor(model => model.Permitir, new { id = "toggle1", data_on = "Sim", data_off = "Não", data_toggle = "toggle", data_class = "fast", data_size = "mini", data_onstyle = "success", data_offstyle = "danger" })
    @Html.ValidationMessageFor(model => model.Permitir, "", new { @class = "text-danger" })
</form>

<input type="submit" class="btn btn-success" value="Adicionar" />

Javascript:

$(function () {
    $('#toggle1').bootstrapToggle();
    $('#toggle2').bootstrapToggle();
    $('#toggle3').bootstrapToggle();
    $('#toggle4').bootstrapToggle();
});

$("#myform").validate({
    ignore: ":hidden",
    rules: {
        Permitir: { required: true}
    },
    messages: {
        Permitir: "<span style=\"color: #a94442;\">Campo Permitir é obrigatório *</span>"

    }, ....

O campo "Permitir" é obrigatório. Ela precisa ficar como true. Validate não está funcionado. Alguma solução ?

0

1 Resposta 1

2

Quando se utiliza Bootstrap Toggle tem um problema: as mensagens não aparecem (esse plugin adiciona uma div que ofusca a mensagem de validação) não obtendo a resposta de validado ou não, mas, tem uma forma amigável de mostrar todos os erros com errorLabelContainer, exemplo minimo:

Html

<form id="myform">
      <div>
         <input type="text" class="form-control" name="Nome" id="Nome" />
      </div>
      <br />
      <div>
         <input type="checkbox" 
                 name="Permitir" id="Permitir" 
                checked data-toggle="toggle" 
                data-size="large" 
                data-width="75" data-height="55"/>
      </div>  
      <br />
      <button class="btn btn-success">Enviar</button>
</form>
<ul id="errors">
</ul>

Javascript

$("#myform").validate({      
  ignore: [],
  rules: {
    Nome: {
      required: true
    },
    Permitir: {
      required: true
    }
  },
  messages: {
    Nome: { required: "Nome é obrigatório" },
    Permitir: { required: "Permitir é obrigatório"}
  },
  errorLabelContainer: "#errors",
  errorElement: "li"
});

Exemplo Online

Observações:

troque:

//html
@Html.CheckBoxFor(model => model.Permitir, new { id = "toggle1"
//javascript
$('#toggle1').bootstrapToggle();

por isso:

//html
@Html.CheckBoxFor(model => model.Permitir, new { id = "Permitir"
//javascript
$('input[type='checkbox'][name='Permitir']').bootstrapToggle();

isso é importante na validação, na padronização e na manutenção do seu código.

0

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 .