0

I'm using the jquery validation plugin to validate the input of a username.

$.validator.addMethod("alphanumeric", function(value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, "Your username can only contain letters, numbers and hyphens.<br />Spaces and special characters are not permitted.");         

$('.setUsername-form').validate({
    errorElement: 'label', //default input error message container
    errorClass: 'help-inline', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",
    rules: {
        chosenUsername: {
            required: true,
            minlength: 4,
            alphanumeric: true                          
        }
    },

stack overflow errors with "Your username can only contain....". This is good.

stackoverflow doesn't error - great!

stack-overflow errors with no output. This is an acceptable user name and should work.

Any ideas? I can't spot the issue. Is it the regex? I'm trying to allow alphabetical characters, numerical characters and hyphens. A-Z, a-z and -. Is [a-zA-Z0-9\-] not correct?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Arbiter
  • 486
  • 1
  • 8
  • 21
  • no problem with your regex. – Avinash Raj Jul 31 '14 at 09:09
  • Hmmm... thanks for confirming – Arbiter Jul 31 '14 at 09:12
  • regex you mentioned in the code is a correct one. `^[a-zA-Z0-9\-]$` allows a single character. – Avinash Raj Jul 31 '14 at 09:15
  • 1
    You could also include [the plugin's `additional-methods.js` file](http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js) and just use its `alphanumeric` rule instead of trying to write your own. – Sparky Jul 31 '14 at 13:52
  • Also see this FYI: http://stackoverflow.com/a/8565769/594235 – Sparky Jul 31 '14 at 13:55
  • Thanks @Sparky - I had actually found this earlier (just before making this thread) but the existing one doesn't do exactly what I'm after. The alphanumeric method name is actually alphanumeric2, I just removed the two to stop people from commenting on it, but +1 for the suggestion :) I just can't for the life of me figure out why it's stopping the submission of the form as explained above :L – Arbiter Jul 31 '14 at 15:48

1 Answers1

1

I suspect your problem is somewhere else in your code.

Here's a fiddle using the code you posted above to implement a form using jquery-validate:

http://jsfiddle.net/klenwell/ZjWWE/

var errorMessage = "Your username can only contain letters, numbers and hyphens.<br />Spaces and special characters are not permitted.";

$.validator.addMethod("alphanumeric", function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, errorMessage);

function validateForm() {
    var $form = $('form.setUsername-form');
    $form.validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            chosenUsername: {
                required: true,
                minlength: 4,
                alphanumeric: true
            }
        },
    });

    if ($form.valid()) {
        $('div.form-status').css('color', 'green').text('form is valid');
    } else {
        $('div.form-status').css('color', 'red').text('form is invalid');
    }

    return false;
}

$('button.submit-form').on('click', validateForm);

You can see that it behaves as expected (tested in Chrome):

  • stack overflow: invalid
  • stackoverflow: valid
  • stack-overflow: valid
klenwell
  • 6,978
  • 4
  • 45
  • 84