I developed a form with localstorage in this site here but inside it has two inputs one for name and another for salary but I needed these fields it is mandatory because when they are not filled in and the user clicks next the fields are blank now if they leave the fields as mandatory it will not happen anymore it is possible to do this follows emu 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 the operation of the session click on the link site that is in the question and go down to session indenizometro there will be the form I need to have the required fields