Hide form fields that will be required

Question

Hide form fields that will be required

Asked 8 years, 1 month ago

Viewed 238 times

0

Hello, I have a form that depending on what will be selected in a select will hide or display fields. The problem is that some of these fields will be of the type required and Submit will not complete if they are hidden and without values, I am using the function below to hide them but how can I treat the required fields that I will need to add?

    $('.PessoaFisica').hide();
    $('#tipoPessoa').change(function () {
        if ($('#tipoPessoa').val() == 'pf') {
            $('.PessoaJuridica').hide();
            $('.PessoaFisica').show();
        }
        else {
            $('.PessoaJuridica').show();
            $('.PessoaFisica').hide();
        }
    });

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
  
@{
    ViewBag.Title = "Create";
}

<div class="container-fluid">
    <div class="col-lg-12">
        <h3>Transportadoras</h3>

        <div class="panel panel-default item-padding">
            <div class="panel-body">
                <form>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tipoPessoa">Pessoa física ou jurídica?</label>
                                <select class="form-control" id="tipoPessoa" name="tipoPessoa">
                                    <option value="pj" selected>Pessoa Juridica</option>
                                    <option value="pf">Pessoa Física</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group PessoaFisica">
                                <label for="cpf">CPF</label>
                                <input id="cpf" name="cpf" class="form-control" type="text" />
                            </div>
                            <div class="form-group PessoaJuridica">
                                <label for="cpf">CNPJ</label>
                                <input id="cpf" name="cpf" class="form-control" type="text" />
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="codigoANTT">Código da ANTT</label>
                                <input id="codigoANTT" name="codigoANTT" class="form-control" type="text" />
                            </div>
                        </div>
                    </div>
                    
                    <div class="row PessoaJuridica">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nomeFantasia">Nome Fantasia</label>
                                <input id="nomeFantasia" name="nomeFantasia" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="razaoSocial">Razão Social</label>
                                <input id="razaoSocial" name="razaoSocial" class="form-control" type="text" />
                            </div>
                        </div>
                    </div>

                    <div class="row PessoaJuridica">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="incricaoMunicioal">Inscrição Municipal</label>
                                <input id="incricaoMunicioal" name="incricaoMunicioal" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="inscricaoEstadual">Inscrição Estadual</label>
                                <input id="inscricaoEstadual" name="inscricaoEstadual" class="form-control" type="text" />
                            </div>
                        </div>
                    </div>

                    <div class="row PessoaFisica">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nome">Nome</label>
                                <input id="nome" name="nome" class="form-control" type="text" />
                            </div>
                        </div>
                    </div>

                    <div class="page-header"><h4>Endereço</h4></div>

                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="cep">CEP</label>
                                <input id="cep" name="cep" class="form-control" type="text" />
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="logradouro">Logradouro</label>
                                <input id="logradouro" name="logradouro" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="numero">Número</label>
                                <input id="numero" name="numero" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="complemento">Complemento</label>
                                <input id="complemento" name="complemento" class="form-control" type="text" />
                            </div>
                        </div>
                    </div>

                    <br />

                    <div class="row pull-right">
                        <div class="form-group">
                            <button class="btn btn-default btn">Voltar</button>
                            <button class="btn btn-success btn">Salvar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</head>

1 answer

Browser other questions tagged c# jquery html

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

by wmarquardt • **601** points · Answer 1 · 2016-10-14T13:39:04+00:00

Try to use the removeAttr() to remove (if you use required of Html5), and uses the .prop() to add again. Ex:

Html:

 <input id="cpf" name="cpf" class="form-control" type="text" required/>

JS:

$('.PessoaFisica').hide();
$('#tipoPessoa').change(function () {
    if ($('#tipoPessoa').val() == 'pf') {
        $('.PessoaJuridica').hide();
        $('.PessoaJuridica').removeAttr('required');
        $('.PessoaFisica').show();
        $('.PessoaFisica').prop('required',true);
    }
    else {
        $('.PessoaJuridica').show();
        $('.PessoaJuridica').prop('required',true);
        $('.PessoaFisica').hide();
        $('.PessoaFisica').removeAttr('required');
    }
});