jQuery validation Registration form

jQuery validation

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
    <form class="validation-form" name="vform" id="vform">
        <h4>User Profile Registration</h4>
        <div>
            <span>First Name</span>
            <input id="firstName" type="text" name="fname" required="required" />
        </div>
        <div>
            <span>Last Name</span>
            <input id="lastName" type="text" name="lname"
                required="required" />
        </div>
        <div>
            <span>E-mail</span>
            <input id="eMail" type="email" name="email" />
        </div>
        
           <div>
               <label for="password1">Password:</label>
               <input type="password" required id="password1" />
     </div>      
           <div>
               <label for="password2">Confirm password:</label>
               <input type="password" required id="password2" />
         </div>
        
        
        <div>
            <input class="btn" type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>

CSS

.validation-form > div > span {
    display: inline-block;
    width: 100px;
}
.validation-form > div > input {
    width: 200px;
}
.validation-form > div > input[type=submit] {
    width: 100px;
}
label.error { 
    color: red; 
    display: inline-block;
    margin-left: 5px;
}
.info-block {
    height: 30px;
    margin: 3px;
    text-align: center;
}

form { 
    padding: 20px; 
    width: 300px; 
    overflow: hidden; 
    }
    
fieldset { 
     padding: 10px; 
     border: 1px solid black; 
     margin-bottom: 5px; 
     }
     
li { 
padding: 10px; 
}

input[type=submit] { 
      float: left; 
      margin-top: 10px; 
 }

JavaScript

/* without JS code it's just HTML5 validation */

DigitsInputHelper("#donate", 2, '.');
DigitsInputHelper("#age", 0);

$("#dateF").datepicker({ 
    dateFormat: "dd.mm.yy",
    onSelect: function (dateText) {
        if ($(this).attr("required") !== undefined) {
            $(this).valid();
        }
    }
});

/* jQuery validation */

$.extend(jQuery.validator.messages, {
    required: "The field can not be empty!",
    email: "The field can not be empty!",
    password: "The field can not be empty!",
    confirmpassoword: "Password doesn't match",
    date: "Дата это: дд.мм.гггг",
    number: "Только целые числа!",
    max: jQuery.validator.format("Уж поздно Вам! Мы младше {0}."),
    min: jQuery.validator.format("Мал ты слишко. Подрасти до {0}.")
});

/* custom methods */

$.validator.addMethod("numberWithTwoDecimalPlaces", function (value, element) {
    return this.optional(element) || /^\d+(\.\d{0,2})?$/i.test(value);
}, "Денежки только такие: {Рубли много}[.копейки только две]");

$.validator.addMethod("notZero", function (value, element) {
    return this.optional(element) || !/(^0+$)|(^0*\.0*$)/i.test(value);
}, "Please enter Values");

$.validator.addMethod("dateNowOrPast", function (value, element) {
    return this.optional(element) || (+parseDate(value) < +(new Date()));
}, "Возможен выбор дат только до сегодняшнего дня включительно.");


// looks like only id is possible here
$("#vform").validate({
    rules: {
        donate: "numberWithTwoDecimalPlaces notZero",
        /* The bad thing is that rule is binded here. So when you are looking at HTML code you can't be sure whether it is set or not :) */
        dateF: {
            date: true, // methods.date - has been changed
            dateNowOrPast: true
        }
    }
});

var password = document.getElementById('password');
var Confirmpassword = document.getElementById('Confirm password');

var checkPasswordValidity = function() {
    if (password1.value != password2.value) {
       ...