1
I am not able to validate the html select with the jquery plugin..
The select to be validated would be select class="Uf"
How would you validate this select with jquery.validate?
I’m doing like this
$(document).ready(function () {
$('#post').validate({ // initialize the plugin
rules: {
email: {
required: true,
email: true
},
nome: {
required: true,
minlength: 5
},
fantasia: {
required: true,
minlength: 5
},
cidade: {
required: true,
minlength: 5
},
uf: {
required: true
}
},
messages: {
required: "Campo obrigatório",
remote: "Please fix this field.",
email: "Por favor insira um email válido",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Não insira mais do que {0} caracteres." ),
minlength: $.validator.format( "Digite pelo menos {0} caracteres." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
step: $.validator.format( "Please enter a multiple of {0}." )
},
submitHandler: function (form) { // for demo
$(".resultado_form_lojista").html('<p class="resultado_form_p">Enviando...</p>');
var form = $('#post');
$.ajax({
url: 'envia_form_lojista.php',
type: 'POST',
data: form.serialize()
})
.done(function(data){
$('.resultado_form_lojista').fadeOut('slow', function(){
$('.resultado_form_lojista').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
return false; // for demo
}
});
});
<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.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<form id="post" method="post" novalidate="novalidate">
<div class="form-group col-md-12">
<label for="cnpj" class="azul ">CNPJ</label>
<input type="text" class="form-control cnpj" name="cnpj" id="cnpj" placeholder="CNPJ" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="nome">Razão Social</label>
<input type="text" class="form-control" name="nome" id="nome" placeholder="Razão Social" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="fantasia">Nome Fantasia</label>
<input type="text" class="form-control" name="fantasia" id="fantasia" placeholder="Nome Fantasia" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="atividade">Atividade Principal</label>
<input type="text" class="form-control" id="atividade" name="atividade" placeholder="Atividade Principal" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="telefone">Telefone</label>
<input type="text" class="form-control" name="telefone" id="telefone" placeholder="Telefone" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Email" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="cep">CEP</label>
<input type="text" class="form-control" name="cep" id="cep" placeholder="CEP" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="logradouro">Logradouro</label>
<input type="text" class="form-control" name="logradouro" id="logradouro" placeholder="Logradouro" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="numero">Número</label>
<input type="text" class="form-control" name="numero" id="numero" placeholder="Número" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="complemento">Complemento</label>
<input type="text" class="form-control" name="complemento" id="complemento" placeholder="Complemento">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="bairro">Bairro</label>
<input type="text" class="form-control" name="bairro" id="bairro" placeholder="Bairro" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="cidade">Cidade</label>
<input type="text" class="form-control" name="cidade" id="cidade" placeholder="Cidade" required="">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="estado">Estado</label>
<select id="uf" class="form-control" name="uf">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</div>
<div class="clearfix"></div>
<h3 class="azul">Dados para acesso a área de Lojistas</h3>
<div class="form-group col-xs-10 col-sm-6 col-md-6 col-lg-6">
<label for="nomeUsuariosss">Usuário</label>
<input type="text" class="form-control usuario" name="usuario" id="usuario" placeholder="Usuário" required="">
</div>
<div class="form-group col-xs-10 col-sm-6 col-md-6 col-lg-6">
<label for="senhasss">Senha</label>
<input type="text" class="form-control senha_usuario" name="senha_usuario" id="senha_usuario" placeholder="Senha" required="">
</div>
<div class="form-group col-xs-10 col-sm-6 col-md-6 col-lg-6">
<label for="atendido_por">Quero ser atendido por</label>
<select id="atendido_por" class="form-control" name="atendido_por" required="">
<option>Selecine um Atendente</option>
<option value="[email protected]">Central de Vendas</option>
<option value="[email protected]">Claudia</option>
<option value="[email protected]">Ceía</option>
<option value="[email protected]">Claudia Lima</option>
<option value="[email protected]">Neide</option>
</select>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right">Enviar Cadastro</button>
</div>
</form>
It turns out that the
SELECT
always has a value. If you add anotheroption
empty-valued (""
) the validation will work.<option value="">Selecione um Estado</option>
.– Diego Souza
thank you was right
– Wagner Martins Bodyboard