-1
I developed a form with localstorage on this site here however inside it has two inputs one for name and the other for salary however needed that these fields were mandatory because when they are not filled and the user clicks next the fields go blank now if leave the fields as mandatory this will no longer happen is possible to do this follows a code:
HTML:
<div class="indenizometro-box">
<img src="img/indenizometro-icon.png" class="icon-indenizometro" alt="Indenisômetro"/>
<h2 class="title">Indenizômetro</h2>
<div class="box-informations">
{{--<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua</p>--}}
<h4 class="subtitle">Selecione a causa: <i class="fa fa-question-circle"
aria-hidden="true"></i>
</h4>
<ul class="list-unstyled list-inline indenizometro-list">
<li class="list "><a class="link -morte morte" data-tipo="morte">Morte</a></li>
<li class="list"><a class="link -invalidez invalidez" data-tipo="invalidez">Invalidez</a></li>
</ul>
</div>
{{--Event morte--}}
<div class="box-informations-morte">
<h4 class="title">Causa: <span>Morte</span></h4>
<p class="subtitle">Insira os dados do paciente</p>
<div class="form-group row">
<div class="col-sm-6 col-xs-6">
<input type="number" name="idade" class="form-control" id="idade"
min="1" max="10" step="2"
placeholder="Idade"/>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon">R$</span>
<input type="phone" name="salario" class="form-control money-mask" id="salario"
placeholder="Salário atual"/>
</div>
</div>
</div>
<ul class="list-inline list-unstyled">
<li><a class="btn-back-morte">voltar</a></li>
<li><a class="btn-next-morte">Próximo</a></li>
</ul>
</div>
<div class="box-protected-morte">
{{--<img src="img/info-segurado.png" class="img-responsive img-segurado"/>--}}
{{--<div class="result-morte"></div>--}}
<ul class="list-inline list-unstyled result-morte-list">
<li>
<h5 class="title">idade</h5>
<div class="result-morte-idade" id="idade-morte"></div>
</li>
<div class="bar-list"></div>
<li>
<h5 class="title">Salário atual</h5>
<div class="result-morte-salario" id="salario-morte"></div>
</li>
<div class="bar-list"></div>
<li>
<h5 class="title" id="causa-morte">causa</h5>
<div class="result-morte-causa"></div>
</li>
</ul>
<p class="subtitle">Valor da indenização</p>
<h3 class="price" id="price-morte"><span>R$</span>35.000,00</h3>
<a class="btn-protected-back-morte">voltar</a>
<a href="{!! route('indenizometro') !!}" class="btn-protected-morte">Proteja-se!<br/><span>Avançe para avaliar seu seguro</span></a>
</div>
{{--End event morte--}}
{{--Evend invalidez--}}
<div class="box-informations-invalidez">
<h4 class="title">Causa: <span>Invalidez</span></h4>
<p class="subtitle">Insira os dados do paciente</p>
<div class="form-group row">
<div class="col-sm-6 col-xs-6">
<input type="text" name="idades" class="form-control" id="idade"
placeholder="Idade"/>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon">R$</span>
<input type="phone" name="salarios" class="form-control money-mask" id="salario"
placeholder="Salário atual"/>
</div>
</div>
</div>
<ul class="list-inline list-unstyled">
<li><a class="btn-back-invalidez">voltar</a></li>
<li><a class="btn-next-invalidez">Próximo</a></li>
</ul>
</div>
<div class="box-protected-invalidez">
<ul class="list-inline list-unstyled result-invalidez-list">
<li>
<h5 class="title">idade</h5>
<div class="result-invalidez-idades"></div>
</li>
<div class="bar-list"></div>
<li>
<h5 class="title">Salário atual</h5>
<div class="result-invalidez-salarios"></div>
</li>
<div class="bar-list"></div>
<li>
<h5 class="title">causa</h5>
<div class="result-invalidez-causas"></div>
</li>
</ul>
<p class="subtitle">Valor da indenização</p>
<h3 class="price"></h3>
<a class="btn-protected-back-invalidez">voltar</a>
<a href="{!! route('indenizometro') !!}" class="btn-protected-invalidez">Proteja-se!<br/>
<span>Avançe para avaliar seu seguro</span>
</a>
</div>
{{--End Event invalidez--}}
</div>
JS:
$(document).ready(function () {
$(".box-informations-morte").hide();
$(".box-protected-morte").hide();
$(".box-informations-invalidez").hide();
$(".box-protected-invalidez").hide();
//morte
$(".-morte").click(function () {
$(".box-informations").hide();
$(".box-informations-morte").fadeToggle('slow');
});
$(".btn-next-morte").click(function () {
$(".box-informations").hide();
$(".box-informations-morte").hide();
$(".box-protected-morte").fadeToggle('slow');
});
//end morte
//invalidez
$(".-invalidez").click(function () {
$(".box-informations").hide();
$(".box-informations-invalidez").fadeToggle('slow');
});
$(".btn-next-invalidez").click(function () {
$(".box-informations").hide();
$(".box-informations-invalidez").hide();
$(".box-protected-invalidez").fadeToggle('slow');
});
//end invalidez
$(".about").click(function () {
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
//localstorage morte
$('.morte').on('click', function () {
sessionStorage.setItem('tipo', $(this).attr('data-tipo'));
});
$('.btn-next-morte').on('click', function () {
var idade = $('input[name=idade]').val();
var salarioAtual = $('input[name=salario]').val();
sessionStorage.setItem('idade', idade);
sessionStorage.setItem('salario', salarioAtual);
var secureValue = (65 - idade) * 12 * (0.7 * salarioAtual) * 1000;
secureValue = secureValue.formatMoney(2, ',', '.');
sessionStorage.setItem('seguro', secureValue);
$('.box-protected-morte .price').html('<span>R$</span>' + secureValue);
$('.result-morte-idade').append('<p>' + sessionStorage.idade + '</p>');
$('.result-morte-salario').append('<p>R$' + sessionStorage.salario + '</p>');
$('.result-morte-causa').append('<p>' + sessionStorage.tipo + ' </p>');
});
$('.btn-back-morte').on('click', function () {
$(".box-informations").fadeToggle('slow');
$(".box-informations-morte").hide();
});
$('.btn-protected-back-morte').on('click', function () {
$(".box-informations-morte").fadeToggle('slow');
$(".box-protected-morte").hide();
$( ".result-morte-idade" ).empty();
$( ".result-morte-salario" ).empty();
$( ".result-morte-causa" ).empty();
$( ".price" ).empty();
});
//localstorage morte
$('.invalidez').on('click', function () {
sessionStorage.setItem('tipo', $(this).attr('data-tipo'));
});
$('.btn-next-invalidez').on('click', function () {
var idade = $('input[name=idades]').val();
var salarioAtual = $('input[name=salarios]').val();
sessionStorage.setItem('idade', idade);
sessionStorage.setItem('salario', salarioAtual);
var secureValue = (65 - idade) * 12 * salarioAtual * 1000;
secureValue = secureValue.formatMoney(2, ',', '.');
sessionStorage.setItem('seguro', secureValue);
$('.box-protected-invalidez .price').html('<span>R$</span>' + secureValue);
$('.result-invalidez-idades').append('<p>' + sessionStorage.idade + '</p>');
$('.result-invalidez-salarios').append('<p>R$' + sessionStorage.salario + '</p>');
$('.result-invalidez-causas').append('<p>' + sessionStorage.tipo + ' </p>');
});
$('.btn-back-invalidez').on('click', function () {
$(".box-informations").fadeToggle('slow');
$(".box-informations-invalidez").hide();
});
$('.btn-protected-back-invalidez').on('click', function () {
$(".box-informations-invalidez").fadeToggle('slow');
$(".box-protected-invalidez").hide();
$( ".result-invalidez-idades" ).empty();
$( ".result-invalidez-salarios" ).empty();
$( ".result-invalidez-causas" ).empty();
$( ".price" ).empty();
});
});
NOTE: to see how the session works click on the link website that is in the question and descend for session indenizometro there will be the form that I need to stay with the required fields