HTML
Validazione di un form con JQuery
12 set
La validazione di un form può avvenire in maniera molto semplice utilizzando il plugin Validation di JQuery.
In questo articolo verrà mostrato un semplice esempio di validazione.
I campi saranno tutti richiesti e, inoltre, l’URL dovrà essere valido per poter essere accettato:
<html>
<head>
<style>
body {
text-align:center;
margin:0 auto;
}
.content {
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
align: center;
}
.content table {
margin-left: auto;
margin-right: auto;
align: center;
}
td {
padding: 15 20 5 50;
}
tr.submitButton td {
padding-bottom: 50px;
padding-top: 50px;
text-align: center
}
p.title {
font-family:"Adobe Caslon Pro",
"Hoefler Text",Georgia,Garamond,Times,serif;
font-size:18pt;
font-variant:small-caps;
letter-spacing:0.2em;
text-align:center;
}
div.jqError {
height: 50px;
color: red;
font-style: oblique;
font-family: serif;
font-weight: bolder;
}
img.errGif {
padding-right: 20px;
}
input.error {
border: 2px solid red;
background-color: #FFFF53;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
// sovrascriviamo i messaggi standard
$.validator.messages.required = "";
$.validator.messages.url = "";
var formName = "#AnagForm";
$(document).ready(function()
{
$(formName).validate({
rules:
{
Name: { required: true },
Lastname: { required: true },
Site: {required: true, url: true},
Username: {required: true}
},
invalidHandler: function(e, v)
{
var errs = v.numberOfInvalids();
if(errs)
{
var str = errs>1 ?
("Ci sono " + errs + " errori") :
("C'è un errore");
$("div[class=jqError]").html(
"<img class=\"errGif\" src=\"error.gif\"/>" + str);
}
}
});
});
</script>
<body>
<form id="AnagForm" action="http://antoniotancredi.altervista.org">
<div class="content">
<p class="title">REGISTRAZIONE</p>
<div class="jqError"></div>
<table>
<tr>
<td><label for="Name">Nome: </label></td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td><label for="Lastname">Cognome: </label></td>
<td><input type="text" name="Lastname"/></td>
</tr>
<tr>
<td><label for="Site">Sito Web: </label></td>
<td><input type="text" name="Site"/></td>
</tr>
<tr>
<td><label for="Username">Username: </label></td>
<td><input type="text" name="Username"/></td>
</tr>
<tr class="submitButton">
<td colspan="2"><input type="submit" value="Conferma"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
HTML/CSS/Javascript: div a scomparsa
11 gen
Breve pagina contenente un div che può essere mostrato o nascosto cliccando su un testo:
Continua >
Generazione in tempo reale del codice HTML
8 gen
In un precedente articolo, ho segnalato la pagina messa a disposizione dal sito w3schools.com per testare in tempo reale il codice HTML scritto.
L’aspetto negativo è che è necessario effettuare un submit, tramite un tasto, ogni volta che vogliamo osservare il risultato del nostro codice.
Molto più comodo sarebbe ottenere il risultato durante la digitazione.
Continua >
Raggruppamento di celle di una tabella in HTML
30 dic
Talvolta, quando si utilizzano le tabelle in HTML, occorre raggruppare righe e/o colonne per far si che il risultato rispecchi il proprio pensiero.
Gli attributi utilizzati sono rowspan e colspan del tag td.
L’esempio che segue mostra una combinazione di questi due attributi per ottenere una tabella con diverse righe/colonne raggrupate:
Continua >
Loading ...