Validate select with the jquery.validate plugin

Asked

Viewed 282 times

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>

  • 3

    It turns out that the SELECT always has a value. If you add another option empty-valued ("") the validation will work. <option value="">Selecione um Estado</option>.

  • thank you was right

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.