Mianowicie mam formularz w html, musze dokonac walidacji hasła, daty urodzenia i strony www. reszta mi już działa.
Ale założenia sa takie:
- pola z gwiazdkami wymagane
- hasło ma conajmniej 5 znaków
- email jest poprawny example@domena.pl
- powtórz hasło - zgodne z hasło
- data urodzenia - wcześniejsza od aktualnej w danym momencie
- strona www zawiera poprawny adres
Kod
<html>
<head>
<title>Rejestracja użytkownika</title>
<link rel="stylesheet" type="text/css" href="style/arkusz.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#Form").validate({
rules: {
firstname: "required",
lastname: "required",
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
//
});
</script>
</head>
<body>
<form action="" method="get"><table>
<tr><td><p class="a"> Rejestracja użytkownika </p></td><td></td></tr>
<tr>
<td><p>Imię(*)</p></td>
<td><input id="cname" name="name" type="text" required /></td>
</tr>
<tr>
<td><p>Nazwisko (*)</p></td>
<td><input id="lastname" name="lastname" type="text" required /></td>
</tr>
<tr>
<td><p>E-mail (*)</p></td>
<td><input id="cemail" type="email" name="email" required /></td>
</tr>
<tr>
<td><p>Hasło (*)</p></td>
<td><input id="password" pattern=".{5,}" name="password" type="password" required placeholder="●●●●●" /></td>
</tr>
<tr>
<td><p>Powtórzone hasło (*)</p>
</td><td><input id="password2" type="password" name="password2" required placeholder="●●●●●"/></td>
</tr>
<tr>
<td><p>Data urodzenia</p></td>
<td><input type="date" name="bdate"></td>
</tr>
<tr>
<td><p>Płeć</p></td>
<td>
<p>
<input type="radio" name="plec">Kobieta
<input type="radio" name="plec">Mężczyzna
</p>
</tr>
<tr>
<td><p>Zainteresowania</p></td>
<td>
<p>
<input type="checkbox" name="software"> Software
<input type="checkbox" name="hardware"> Hardware
<input type="checkbox" name="telekomunikacja"> Telekomunikacja
</p>
</td>
</tr>
<tr>
<td><p>Strona www</p></td>
<td><input type="text" name="website"></td>
</tr>
<tr>
<td><p>Regulamin</p></td>
<td>
<p>
<input id="cagree" type="checkbox" name="agree" required />Akceptuję regulamin serwisu(*)
</p>
</td>
</tr>
<tr>
<td><p class="ita">*Pola wymagane</p></td><td></td>
</tr>
<tr>
<td></td>
<td>
<p>
<input class="a" type="reset" name="reset" value="Wyczyść">
<input class="b" type="submit" name="submit" value="Wyślij">
</p>
</td>
</tr>
</table></form>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Poprawny CSS!" />
</a>
</p>
</body>
</html>
<head>
<title>Rejestracja użytkownika</title>
<link rel="stylesheet" type="text/css" href="style/arkusz.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#Form").validate({
rules: {
firstname: "required",
lastname: "required",
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
//
});
</script>
</head>
<body>
<form action="" method="get"><table>
<tr><td><p class="a"> Rejestracja użytkownika </p></td><td></td></tr>
<tr>
<td><p>Imię(*)</p></td>
<td><input id="cname" name="name" type="text" required /></td>
</tr>
<tr>
<td><p>Nazwisko (*)</p></td>
<td><input id="lastname" name="lastname" type="text" required /></td>
</tr>
<tr>
<td><p>E-mail (*)</p></td>
<td><input id="cemail" type="email" name="email" required /></td>
</tr>
<tr>
<td><p>Hasło (*)</p></td>
<td><input id="password" pattern=".{5,}" name="password" type="password" required placeholder="●●●●●" /></td>
</tr>
<tr>
<td><p>Powtórzone hasło (*)</p>
</td><td><input id="password2" type="password" name="password2" required placeholder="●●●●●"/></td>
</tr>
<tr>
<td><p>Data urodzenia</p></td>
<td><input type="date" name="bdate"></td>
</tr>
<tr>
<td><p>Płeć</p></td>
<td>
<p>
<input type="radio" name="plec">Kobieta
<input type="radio" name="plec">Mężczyzna
</p>
</tr>
<tr>
<td><p>Zainteresowania</p></td>
<td>
<p>
<input type="checkbox" name="software"> Software
<input type="checkbox" name="hardware"> Hardware
<input type="checkbox" name="telekomunikacja"> Telekomunikacja
</p>
</td>
</tr>
<tr>
<td><p>Strona www</p></td>
<td><input type="text" name="website"></td>
</tr>
<tr>
<td><p>Regulamin</p></td>
<td>
<p>
<input id="cagree" type="checkbox" name="agree" required />Akceptuję regulamin serwisu(*)
</p>
</td>
</tr>
<tr>
<td><p class="ita">*Pola wymagane</p></td><td></td>
</tr>
<tr>
<td></td>
<td>
<p>
<input class="a" type="reset" name="reset" value="Wyczyść">
<input class="b" type="submit" name="submit" value="Wyślij">
</p>
</td>
</tr>
</table></form>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Poprawny CSS!" />
</a>
</p>
</body>
</html>