Utilizando Alertas sem submeter

Você está querendo validar os campos. Para fazer a pesquisa no banco, comece estudando ajax. Para fazer a validação do formulário, precisará estudar submit.

Obrigado mas estou sem tempo pra estudar agora .... preferia um exemplo pratico de alguem que já tenha isto em pratica ... acho que webdesign faca isto no dia a dia e eu nao manjo dos front-end como vcs !!

ta tenhu a pagina toda pronta e os codigos de bando de dados, só queria estilizar o alerta com jquery

CamilaLopez

Vou passar pra vc um exemplo bem simples que vc pode adequar as suas necessidades ok.

function validar(formulario){
 if(formulario.nome.value == ''){ /* aqui vc coloca a condição que vc quer que seja submetido o controle do campo. */

 alert("O campo NOME é obrigatório."); /* aqui é o que vc quer que apareça na mensagem.*/
 return false; } /*fecha aqui */

 if(formulario.nome.value.length <= 3){
 alert("Nome invalido.");
 return false; }
 if(formulario.email.value.indexOf(('@' && '.'),0)== -1){
 alert("EMAIL invalido.");
 return false; }

Abraços

Obrigado amigo, mas a validacao de campos e strings eu sei ..... :D

Como citado acima quero é uma verificao de banco de dados, eu ja tenho ela pronta rodando ... só que preciso faze-le sem o loader da pagina ou seja faze-lo com jquery.

quando submeter o formulario ele faz uma busca pelo novo usuario cadastrado exemplo: "teste@teste.com"

Select * from usuario where email= "teste" ;

E ae se ele existir já na base de dados mostrar um alerta com bootstrap bunitim informando que já existe.
porem que sem load

E se nao existir mostrar o aerta verdim e limpar os campos, mas já foi feito o cadastro por traz.

Assim desculpa a falta de atenção, agora entendi o que você quis dizer.

Então da uma olhada neste exemplo que william bruno fez acho que cabe certinho no seu problema.

http://wbruno.com.br/ajax/verificar-se-usuario-ja-existe-no-banco/

Você pode usar a função $.POST() ou $.GET() do jQuery vai depender do method do seu formulário.

Basicamente você vai monstar um arquivo para chegar o campo, por exemplo:

 $(document).ready(function(){

 // Ação para quando você sair do input
 $("#campoUsuario").blur(function(){

 var Usuario = $(this).val(); // Recupera o valor do campo para ir checar no banco.
 // Aqui função para ir buscar no banco, sendo que o formulário está com o method igual a POST
 $.POST("checar.php", {nome:Usuario}, function(data){

 // Faz um alerta com a resposta do banco caso seja igual a true
 // avisando que o usuário já existe;

 if(data == "True"){
 alert("O usuário já existe no banco"); // Alerta pro usuário.
 $("#campoUsuario").css('border-color', 'red'); // Coloca o campo com a borda vermelha
 return false; // Não envia o form.
 }

 }

 });

 });

O arquivo checar.php vai receber essa informação como se fosse o envio normal de um form, ou seja, dentro do arquivo você vai recuperar o valor enviado usando o valor passado no segundo parametro da função $.POST() que é {nome:VALOR_DO_PARAMETRO}, ou seja, lá você vai recuperar assim:

$nome = $_POST['nome'];

Se fosse GET seria:

$nome = $_GET['nome'];

Eu fiz esse vídeo tutorial mostrando exatamente o que você quer - http://webvisualedinamica.com/web-visual-dinamica-formulario-de-cadastro-dinamico-com-jquery-php-e-mysql/

Dá uma olhada lá, espero que ajude.

Abraço.

No meu exemplo são dois combobox, onde pego valores ao carregar a página... sem submeter.. para preenche-los:

Combos (está com uma lista:

<div id="comboVeiculo">
 <c:import url="ServletVeiculo" />
 <c:set var="listaVeic" value="${requestScope.listaVeiculo}" />
 <select name="veiculo" id="VeicSelecionado" style="width:125px;">
 <option value="0">VEICULO</option>
 <c:forEach var="listasVeic" items="${listaVeic}">
 <option value="${listasVeic.veiculo}">${listasVeic.veiculo}</option>  
 </c:forEach>
 </select>
 </div>

 <div id="comboDispositivo">
 <c:import url="ServletVeiculo" />
 <c:set var="listaDisp" value="${requestScope.listaDispositivo}" />
 <select name="dispositivo" id="DispSelecionado" style="width:125px;">
 <option value="0">DISPOSITIVO</option>
 <c:forEach var="listasDisp" items="${listaDisp}">
 <option value="${listasDisp.dispositivo}">${listasDisp.dispositivo}</option>
 </c:forEach>
 </select>
 </div>

Função:

function displayVals() {
 var veiculoSeleionado = $('#VeicSelecionado :selected').text();
 var dispositivoSeleionado = $('#DispSelecionado :selected').text();
 $.ajax({
 type: 'POST',
 url: 'ServletVeiculo',
 data: {
 veiculo:veiculoSeleionado,
 dispositivo:dispositivoSeleionado
 },
 beforeSend:function(){
 // this is where we append usually a loading image
 },
 success:function(data){
 // successful request; do something with the data
 $('#output').html(data);

 },
 error:function(){
 // failed request; give feedback to user
 }
 });
	}
	$( "select" ).change( displayVals );
	displayVals();