asked on

Jquery validator add method month year

Hello experts
I need help to create a custom jQuery.validator.addMethod for a date input with only month and year.
Format: mm/yyyy where month from 01 to 12 and year from 1990 to 2015.
Any help?

SOLUTION

Jeff Darling

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jeff Darling

sample

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<style>
.error{
  color: #FF0000;
}

</style>
<script>
$(document).ready(function(){
 $.validator.addMethod("monthYear", function (value, element) {
        return this.optional(element) || /^\d{2}\/\d{4}$/.test(value);
    }, "Please enter MM/YYYY format only.");

    $.validator.addMethod("monthLimit", function (value, element) {
        var myRegexp = /^(\d{2})(.*?)$/;
        var match = myRegexp.exec(value);
        var bValid;
        bValid = false;
        if (match[1] > 0 && match[1] < 13) {
            bValid = true;
        }
        return this.optional(element) || bValid;
    }, "Please enter month between 1 and 12");

    $.validator.addMethod("yearLimit", function (value, element) {
        var myRegexp = /^(.*?)(\d{4})$/;
        var match = myRegexp.exec(value);
        var bValid;
        bValid = false;
        if (match[2] > 1989 && match[2] < 2016) {
            bValid = true;
        }
        return this.optional(element) || bValid;
    }, "Please enter Year between 1990 and 2015 only.");


    $("form").validate({
        rules: {
            monthYear: {
                required: true,
                minlength: 7,
                monthYear: true,
                monthLimit: true,
                yearLimit: true
            }
        },
        submitHandler: function () {
            alert('successful submit');
            return false;
        }
    });
});
</script>
</head>
<body>

<form method="POST">
    <table border=1>
    <tr>
    <td>MM/YYYY</td>
    <td><input type="text" name="monthYear" value="" /></td>
    <td><div class="error" id="error"></div></td>
    </tr>
    </table>
    <input type="submit">
</form>

</body>
</html>

Open in new window

Panos

ASKER

Hi Jeff Darling
Thank you for your post.
Take a look at my remake using your sample code.
Why it is not working right?

$.validator.addMethod("monthYear", function (value, element) {return this.optional(element) || /^\d{2}\/\d{4}$/.test(value);});
$.validator.addMethod("monthLimit", function (value, element) {
        var myRegexp = /^(\d{2})(.*?)$/;
        var match = myRegexp.exec(value);
        var bValid;
        bValid = false;
        if (match[1] > 0 && match[1] < 13) {
            bValid = true;
        }
        bValid;
    });
$.validator.addMethod("yearLimit", function (value, element) {
        var myRegexp = /^(.*?)(\d{4})$/;
        var match = myRegexp.exec(value);
        var bValid;
        bValid = false;
        if (match[2] > 1989 && match[2] < 2015) {
            bValid = true;
        }
        bValid;
    });
	$("#myform").validate({
		
		rules: {
			  monthYear: {required: true,minlength: 7,monthYear: true,monthLimit:true,yearLimit:true}
		},
        messages: {
			monthYear:{required:'required',minlength:"Min. length: 7",monthYear:'Please enter MM/YYYY format only.',monthLimit:'Please enter month between 1 and 12',yearLimit:'Please enter Year between 1990 and 2015 only.'}
		}
	}
	);

Open in new window

Panos

ASKER

I did copy paste your code and it is working perfect. If you can please post the way using the messages attribute too.

ASKER CERTIFIED SOLUTION

Jeff Darling

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Thank you very much.