Hello, I have a form that depending on what is going to be selected in a select will hide or display fields. The problem is that some of these fields will be of the required type and the submit will not complete if they are hidden and with no values, I am using the function below to hide them but how can I handle the required fields that I 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>