alphanumeric validation not working in jquery

Question

my code is given below,all the required js files are included.

<?php 
    echo $this->Html->script('jquery');
    echo $this->Html->script('jquery-ui');
    echo $this->Html->script('jquery.validate');
    echo $html->css('jquery-ui');

?>

when i submit the form without giving any value for UserDetailAliasName the form does not submits and validation error message is displayed("this field is required").but if i submit a value like @,# etc the form submits the data. iam using this form to search for username from db.

$(document).ready(function () {
    jQuery.validator.addMethod("alphaNumeric", function (value, element) {
        return this.optional(element) || /^[0-9a-zA-Z]+$/.test(value);
    }, "Username must contain only letters, numbers.");


    $('#UserDetailIndexForm').validate({
        rules: {
            UserDetailAliasName: {
                required: true,
                alphaNumeric: true
            }
        }
    });

});

Answer 1

tested and that works.. is required also not working for you?

demo