$().ready(function () {
    $("#signUpForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true
            },
            agree: "required",
            dtPicker1: {
                required: true,
                date: true
            },
            dtPicker2: {
                required: true,
                date: true,
                greaterThan: "#dtPicker1"
            }
        },
        messages: {
            firstname: "<p class='text-danger'> Please enter your firstname</p>",
            lastname: "<p class='text-danger'>Please enter your lastname</p>",
            username: {
                required: "<p class='text-danger'> Please enter a username</p>",
                minlength: "<p class='text-danger'> Your username must contain at least 2 characters</p>"
            },
            password: {
                required: "<p class='text-danger'> Please enter a username</p>",
                minlength: "<p class='text-danger'> Your username must contain at least 5 characters</p>"
            },
            confirm_password: {
                required: "<p class='text-danger'> Please enter a username</p>",
                minlength: "<p class='text-danger'> Your username must contain at least 5 characters</p>",
                equalTo: "<p class='text-danger'>Please enter the same password as above</p>"
            },
            email: "<p class='text-danger'>Please enter a valid email address</p>",
            agree: "<p class='text-danger'>Please accept our policy</p>",
            dtPicker2: "<p class='text-danger'>Must be greater than end date</p>"
        }
    });

    $("#username").focus(function () {
        let firstname = $("#firstname").val();
        let lastname = $("#lastname").val();
        if (firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    $(function () {
        $(".myDT").datepicker();
    });

    jQuery.validator.addMethod("greaterThan",
        function (value, element, params) {

            if (!/Invalid|NaN/.test(new Date(value))) {
                return new Date(value) > new Date($(params).val());
            }

            return isNaN(value) && isNaN($(params).val())
                || (Number(value) > Number($(params).val()));
        }, '<p class=\'text-danger\'>Must be greater than {0}.</p>');

});