Olá, gostaria de saber o seguinte:
Estou fazendo uma tela de Login, onde a mesma é dividida em duas etapas. A primeira o usuário digita o Email, e na segunda etapa, o usuário digita sua senha e prossegue adiante. Mas eu quero uma etapa intermediária neste processo, onde eu coloco um spinner de carregamento, para o usuário visualizar se está tudo certo com o Login, ou não. Segue o código HTML:
<form class="form-horizontal msform" action="#" method="POST" id="myform"> <!-- INICIO PRIMEIRA ETAPA --> <fieldset id="account_information" class=""> <div class="form-group"> <input type="email" class="form-control form-login input-login-email" id="" name="email" placeholder="Digite seu Email"> </div> <small class="small-login-email">Ao acessar, concordo com os <a href="#" target="_blank">Termos de Uso</a>.</small> <p><a class="btn btn-success btn-1 btnlogin col-md-offset-10 col-sm-offset-10 a-login-email next">Próximo</a></p> </fieldset> <!-- FIM PRIMEIRA ETAPA --> <!-- CARREGAMENTO AO MEIO --> <fieldset id="loading_information"> <div style="text-align: center;position: relative;top: 105px;"> <div class="sk-spinner sk-spinner-wave"> <div class="sk-rect1" style="background-color: #1212b1"></div> <div class="sk-rect2" style="background-color: #1212b1"></div> <div class="sk-rect3" style="background-color: #1212b1"></div> <div class="sk-rect4" style="background-color: #1212b1"></div> <div class="sk-rect5" style="background-color: #1212b1"></div> </div> </div> <p><a class="btn btn-success btn-1 btnlogin col-md-offset-10 col-sm-offset-10 a-login-email next">Próximo</a></p> </fieldset> <!-- FIM CARREGAMENTO AO MEIO --> <!-- INICIO SEGUNDA ETAPA --> <fieldset id="company_information" class="animated fadeInDown"> <div class="form-group"> <input type="password" class="form-control form-login input-login-pass" id="company" name="company" placeholder="Digite sua Senha"> </div> <small class="small-login-pass"> <a href="#" target="_blank">Esqueci minha senha</a> <p><input style="" class="btn btn-success btn-1 col-md-offset-10 col-sm-offset-10 submit-login-pass" type="submit" value="Acessar"></p> </fieldset> <!-- FIM SEGUNDA ETAPA -->
Comentário: Ignorem a nomenclatura dos Id’s rsrsrs.
Função de validação do Login:
$ (document).ready(function(){ // Custom method to validate username $ .validator.addMethod("usernameRegex", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9]*$ /i.test(value); }, "Usuário pode conter apenas letras ou números."); $ (".next").click(function(){ var form = $ ("#myform"); form.validate({ errorElement: 'span', errorClass: 'help-block', highlight: function(element, errorClass, validClass) { $ (element).closest('.form-group').addClass("has-error"); }, unhighlight: function(element, errorClass, validClass) { $ (element).closest('.form-group').removeClass("has-error"); }, rules: { username: { required: true, usernameRegex: true, minlength: 6, }, password : { required: true, }, conf_password : { required: true, equalTo: '#pwd', }, company:{ required: true, }, url:{ required: true, }, name: { required: true, minlength: 3, }, email: { required: true, minlength: 3, }, }, messages: { username: { required: "", }, password : { required: "", }, conf_password : { required: "", equalTo: "", }, name: { required: "", }, email: { required: "", }, } }); if (form.valid() === true){ if ($ ('#account_information').is(":visible")){ current_fs = $ ('#account_information'); next_fs = $ ('#company_information'); } else if($ ('#company_information').is(":visible")){ current_fs = $ ('#company_information'); next_fs = $ ('#personal_information'); } next_fs.show(); current_fs.hide(); } }); $ ('#previous').click(function(){ if($ ('#company_information').is(":visible")){ current_fs = $ ('#company_information'); next_fs = $ ('#account_information'); } else if ($ ('#personal_information').is(":visible")){ current_fs = $ ('#personal_information'); next_fs = $ ('#company_information'); } next_fs.show(); current_fs.hide(); }); });
Agora, eu quero que quando eu clicar no botão Próximo, ele avance pelo nível intermediário, fique alguns segundos e depois apareça a etapa de digitar a senha.
Como eu poderia fazer isto?
Nota: Estou utilizando jquery, jquery-validate e bootstrap.