validazione form con div tipo alert

gabjet

Nuovo Utente
17 Mag 2016
2
1
3
Ciao, sto costruendo un form
che mi apra dei popup tipo alert (ma più carini)
per chiedermi i dati dei campi non compilati.

premetto che non vorrei utilizzare il plugin alert ui.

questo codice funzione parzialmente:
se lascio un solo campo vuoto me lo chiede
e i dati passano correttamente;
ma se lascio due campi vuoti la prima volta mi chiede il dato
e lo inserisce correttamente, la seconda volta
inserisce il secondo dato su entrambi i campi vuoti.

di seguito allego il codice:

HTML:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>test</title>
<script type="text/javascript" src="script/jquery-2.2.3.min.js"></script>
<link href="stili/alert.css" rel="stylesheet" type="text/css" />
</head>

<body>

<?php
if ((isset($_POST['tavolo'])) && ($_POST['tavolo']<>'')){
	$tavolo=$_POST['tavolo'];
	$coperti=$_POST['coperti'];
	echo 'tavolo: '.$tavolo.'<br>
		  coperti: '.$coperti.'<br>';
}
?>

<form action="test_jquery.php" method="post" name="ordine" id="ordine">
<input class="piatto1" type="text"><input class="aggiungi1" type="button" value="+"><input class="sottrai1" type="button" value="-"><br>
<input class="piatto2" type="text"><input class="aggiungi2" type="button" value="+"><input class="sottrai2" type="button" value="-"><br>
<input class="piatto3" type="text"><input class="aggiungi3" type="button" value="+"><input class="sottrai3" type="button" value="-"><br>
<label>tavolo</label><input id="tavolo" class="piatto" name="tavolo" type="text" /><br>
<label>coperti</label><input id="coperti" class="piatto"  name="coperti" type="text" /><br>
<input class="conferma" type="submit" value="conferma">

<div class="avvisoTavolo">
<div class="testaAvviso"></div>
<input id="numManca" class="numManca" type="text" />
<input name="chiudi" class="chiudi" type="submit"/>
</div>

</form>

<script>
	$('#ordine').submit(function(){
			if ($('#tavolo').val()==''){
				$('.avvisoTavolo').css('display','block')
				$('#numManca').before($('#tavolo').attr('id')+'<br>');			
				numManca.focus(tavolo);
				
				$('.chiudi').click(function(campo){
					var numTavolo = $(numManca).val();
					var campo=$(this).attr('id');
					$('#tavolo').val(numTavolo);
					$('.avvisoTavolo').css('display','none');
				});
				
				$("#ordine").keypress(function(e) {
  					if (e.which == 13) {
					var numTavolo = $(numManca).val();
					var campo=$(this).attr('id');
					$('#tavolo').val(numTavolo);
					$('.avvisoTavolo').css('display','none');
				 	}
				});
				
				return false;
			}

			if ($('#coperti').val()==''){
				$('.avvisoTavolo').css('display','block')
				$('#numManca').before($('#coperti').attr('id')+'<br>');
				numManca.focus('coperti');
				
				$("#ordine").keypress(function(e) {
  					if (e.which == 13) {
					var numTavolo = $(numManca).val();
					var campo=$(this).attr('id');
					$('#coperti').val(numTavolo);
					$('.avvisoTavolo').css('display','none');
				 	}
				});
					
				$('.chiudi').click(function(campo){
					var numTavolo = $(numManca).val();
					var campo=$(this).attr('id');
					$('#coperti').val(numTavolo);
					$('.avvisoTavolo').css('display','none');
				});
				return false;
			}
		});
</script>

</body>
</html>
spero qualcuno possa aiutarmi

grazie
Gabjet