Validar campos antes de proseguir

[assouza21 0]

Tenho uma tela de cadastro. O cara preenche os dados, e ao clicar no botao (submit) "CADASTRAR", a página salvará as informações e SÓ DEPOIS abrir uma cx para o usuário escolher as preferências. O problema é que mesmo os campos do cadastro estando em branco, ao clicar em CADASTRAR, a cx abre. Não quero que abra sem que o usuário esteja cadastrado. Alguma ajuda ? Vou postar o trecho do código

<code>

  <!-- Cadastar os usuarios -->

                        <h3>CADASTRO</h3>

	                            		<p>Preencha os campos abaixo para cadastrar-se:</p>

	                        		</div>

	                        		<div class="form-top-right">

	                        			<i class="fa fa-pencil"></i>

	                        		</div>

	                            </div>

	                            <div class="form-bottom">

				                        <form role="form" action='{{action("Usuarios@cadastrarUsuario")}}' method="post" class="registration-form">

    				                    	         <div class="form-group">

    				                    		<label class="sr-only" for="form-first-name">First name</label>

    				                        	<input type="text" name="nome" required placeholder="Nome..." class="form-first-name form-control" id="form-first-name">

    				                        </div>

    				                        <div class="form-group">

    				                        	<label class="sr-only" for="form-last-name">Last name</label>

    				                        	<input type="text" name="sobrenome" required placeholder="Sobrenome..." class="form-last-name form-control" id="form-last-name">

    				                        </div>

                										<div class="col-md-12 col-sm-12 col-xs-12">

                											<div class="radio">

                												SEXO:

                												<label>

                												<input type="radio" class="flat" checked name="genero"> F

                												</label>

                												<label>

                												<input type="radio" class="flat" name="genero"> M

                												</label>

                											</div>

                										</div>

                										<div class="form-group">

    				                        	<p> Data de nascimento: </p>

    				                        	<input type="date" name="datanasc" required placeholder="Data de nascimento..." class="form-password form-control">

    				                        </div>

              										<div class="form-group">

              				                        	<label class="sr-only" for="form-endereco">CPF</label>

              				                        	<input type="text" required name="cpf" placeholder="CPF..." id="cpf">

              				                        </div>

              										<div class="form-group">

              				                        	<label class="sr-only" for="form-endereco">Telefone</label>

          				                        	<input type="text" name="telefone" required placeholder="Telefone..." class="form-endereco form-control" id="telefone">

          				                        </div>

          										              <div class="form-group">

          				                        	<label class="sr-only" for="form-endereco">Endereco</label>

          				                        	<input type="text" name="logradouro" required placeholder="Endereço..." class="form-endereco form-control" id="form-endereco">

          				                        </div>

          										            <div class="form-group">

          				                        	<label class="sr-only" for="form-cep">CEP</label>

          				                        	<input type="text" name="cep" min="8" max="9" required placeholder="CEP..." class="form-cep form-control" id="cep">

          				                        </div>


          										            <div class="form-group">

          				                        	<label class="sr-only" for="form-bairro">Bairro</label>

          				                        	<input type="text" name="bairro" placeholder="Bairro..." class="form-bairro form-control" id="form-bairro">

          				                        </div>


          										            <div class="form-group">

          				                        	<label class="sr-only" for="form-bairro">Estado</label>

          				                        	<input type="text" placeholder="Estado..." class="form-bairro form-control" name="estado" id="estado" default="SP"></select>

          				                        </div>


                                          <div class="form-group">

                                            <label class="sr-only" for="form-bairro">Cidade</label>

                                            <input type="text" name="cidade" placeholder="Cidade..." class="form-bairro form-control" id="cidade"></select>

                                          </div>

          										            <div class="form-group">

          				                        	<label class="sr-only" for="form-email">Email</label>

          				                        	<input type="text" name="email" required placeholder="Email..." class="form-email form-control" id="form-email">

          				                        </div>

          				                        <div class="form-group">

          				                        	<label class="sr-only" for="form-email">Senha</label>

          				                        	<input type="password" name="senha" required min="6" placeholder="Senha..." class="form-email form-control" id="form-email">

          				                        </div>

            										          <div class="form-group">

            										            <input type="checkbox" name="news"> Desejo receber novidades por e-mail.

            										          </div>

                                <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />

                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">CADASTRAR</button>

                              </form>

                              <!-- Fim do formulario de cadastro -->


                              <!-- Inicio do formulario de Preferencias -->

                              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">

                                <div class="modal-dialog" role="document">

                                  <div class="modal-content">

                                    <div class="modal-header">

                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                                      <h4 class="modal-title" id="exampleModalLabel">PREFERÊNCIAS:</h4>

                                      <h5 class="modal-title" id="subtitle">Selecione o que ver primeiro:</h5>

                                    </div>

                                    <div class="modal-body">

                                      <form>

                                        <div class="form-group">

                                        <label class="checkbox-inline"><input type="checkbox" name="1" value="10">Balada</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="2" value="2">Barzinho</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="3" value="8">Chopperia</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="4" value="5">Cinema</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="5" value="13">Exposição</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="6" value="7">Fast Food</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="7" value="14">Feira</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="8" value="11">Festival</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="9" value="15">Jogos</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="10" value="9">Lanchonete</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="11" value="12">Museu</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="12" value="6">Pizzaria</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="13" value="1">Restaurante</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="14" value="3">Show</label>

                                        <label class="checkbox-inline"><input type="checkbox" name="15" value="4">Teatro</label>

                                    <div class="modal-footer">

                                      <button type="submit" class="btn btn-primary">SALVAR</button>

                                    </div>

                                  </div>

                                </div>

                              </div>

                              <!-- Fim do formulario de Preferencias -->

[Elizandro Tavares 2]

Com js você resolve isso fácil.

Veja o link.

http://rafaelcouto.com.br/validando-formularios-com-javascript/

[icarof 9]

Coloque validação nos campos, você pode usar o required na tag html, tipo

  <input type="text" name="nome" value="" required >

Outra coisa, não vi nenhum código PHP no seu script, se esta usando Bootstrap, busque no site do mesmo que você encontra soluções também

[assouza21 0]

Com js você resolve isso fácil.

Veja o link.

http://rafaelcouto.com.br/validando-formularios-com-javascript/

Mas nesse caso, somente irá checar após clicar no botão..

O cara não pode clicar no botão.. tipo, deixar ele desabilitado enquanto não preencher tudo.

[icarof 9]

Modifique os inputs, pois o formulário só será submetido se eles estiverem preenchidos, procure por HTML 5

[Rafael23 0]

A melhor forma de você fazer o que quer é realmente com JavaScript + HTML 5.

Com o HTML você faz o que o ícaro já citou:

<input type="text" name="nome" value="" required >

Com JavaScript/Jquery você desabilita o botão de enviar logo que carregar sua página, por exemplo:

var $botao    = $("#id do seu botão de cadastrar");
$botao.prop("disabled", true);

Depois que o usuário preencher todos os campos você habilita:

$botao.prop("disabled", false);

[icarof 9]

Isso, não recomendo muito Javascript, porque não manjo muito, mas o que o Rafael coloco resolve, caso de certo marque como resolvido