jQuery validation Registration form

jQuery validation

by sunil puvvada

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>jQuery Validation</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>
            <span>Your age</span>
            <input type="number" name="numberN" id="age"
                min="17" max="77" required="required" />
        </div>
        <div>
            <span>Date</span>
            <input id="dateF" type="text" name="dateF" 
                required="required" />
        </div>
        <div>
            <span>Donate $</span>
            <input type="text" name="donate" id='donate' />
        </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;
}

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: "Поле не может быть пустым!",
    email: "По такому адресу никакая почта не дойдёт!",
    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);
}, "Ноль за все труды! Так нельзя!");

$.validator.methods.date = function(value, element) {
    console.log("validDate = " + value);
    console.log("parse = " + parseDate(value));
    console.log("!== = " + (parseDate(value) !== 'Invalid Date'));
    return this.optional(element) || 
        isValidDate(value) === true;
};

// 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
        }
    }
});

//*/

/* Allows only digits and one point input, restrics length of mantissa */
function DigitsInputHelper(inputSelector, mantissaLength, decimalSeparator) {
    if ($(inputSelector).length > 0) {
       ...