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?
LVL 2
PanosAsked:
Who is Participating?
 
Jeff DarlingDeveloper AnalystCommented:
The return statements on the functions are required.

See line 23 and 33

<!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);});
$.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 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] < 2016) {
            bValid = true;
        }
        return bValid;
    });
	$("form").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.'}
		}
	}
	);
});
</script>
</head>
<body>

<form method="POST">
    <table>
    <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

0
 
Jeff DarlingDeveloper AnalystCommented:
I think this is what you are asking for.

http://jsfiddle.net/jeffld/0ow4gsq3/
0
 
Jeff DarlingDeveloper AnalystCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PanosAuthor Commented:
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

0
 
PanosAuthor Commented:
I did copy paste your code and it is working perfect. If you can please post the way using the messages attribute too.
0
 
PanosAuthor Commented:
Thank you very much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.