jQuery textfield validation against json / array

Question

i'm looking for a solution to validate the input of a textfield against an array which is provided by a json-file. For example: To check within a registration form, if the desired username already exists.

Can anybody help out with a working example, plugin, script, or tutorial?

The 'usernames.json' looks like this...

{"usernames":["carl","jack","jill"]}

...and is read out with...

$.getJSON("usernames.json", function(names) {
var invalidName = names;

I would go on with...

jQuery.validator.addMethod

...but from here on, i'm stuck.

If anybody may help out with a working example, i'd be very glad!

////////////////////////////////////////////////////

EDIT: Thanks to Utkanos and Pavel Staseljun, i could figure out the following solution, which is only roughly tested! Please also find Utkanos' example down below, because this one includes "keyup"-handling instead of "submit" and does not include a "required"-check. "#errorresponse" is the div, where an error-message may be displayed.

$.ajax({
  url: "http://yoururlto.json?callback=?",
  dataType:"jsonp",
  jsonpCallback: '?',
  async: false,
  success: function(json) {
        $('#user').keyup(function(evt) {
        var jsonarray = json.usernames;
        var userinput = $('#user').val().toLowerCase()
        var check = $.inArray(userinput, jsonarray);
        if (check !== -1) {
            $("#errorresponse").text('Thanks to Utkanos and Pavel Staseljun!');
            }
        })
      }
});

Mitya · Accepted Answer · 2012-07-31 09:31:43Z

1

HTML

<form id='signup'>
    <label>Choose a username</label>
    <input type='text' id='user' />
    <input type='submit' value='submit' />
</form>

JS / jQuery

$.getJSON("usernames.json", function(json) {
    $('#signup').on('submit', function(evt) {
        var user = $('#user').val(), error;
        if (!user)
            error = 'no username entered';
        else if (json.usernames.indexOf(user) != -1)
            error = 'username already taken';
        if (error) { evt.preventDefault(); alert(error); }
    });
});

answered Jul 31, 2012 at 9:31

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavel Staselun Over a year ago

I think if ($.inArray($('#username').val(), json.usernames)) error = 'username already taken'; instead of if (json.usernames.indexOf($('#username').val()) != -1) error = 'username already taken'; is better..?

Mitya Over a year ago

Well, yes, it's more cross-browser. I just like ECMA5 :)

kannix · Accepted Answer · 2012-07-31 09:33:32Z

0

Why do you want to send all usernames from the server to a client? This sounds like a pretty bad idea. Please do something like a server side function which checks for a posted username and returns true or false for valid or invalid?

answered Jul 31, 2012 at 9:33

kannix

5,1777 gold badges31 silver badges47 bronze badges

3 Comments

Elvis Over a year ago

Because i would prefer some kind of "on the fly" validation, therefore, json is faster. This is supposed to work on mobile devices as well; a server-side function (like php) is impossible in this case.

kannix Over a year ago

by using ajax you could use "on the fly" validation and especially on mobile devices you'll get pretty fast to a point where holding an array of 10000 usernames is much more slower than a simple ajax request. In addition it seems to be a security issue if every client can read all your usernames.

Elvis Over a year ago

Maybe we have a misunderstanding? I do use ajax/js for the validation itself. :-) In fact, i've chosen the "username"-scenario as an example, to keep the question more common. There are two validation steps: One before the form is send (client-side) and another, when the submission is processed via php (server-side). So, in this case, it's just about the fast client-side solution.

dead · Accepted Answer · 2012-07-31 09:33:42Z

0

Can't you create an ajax script checking if a username exists

Much better imo, because you can directly integrate it with jquery validator using remote option.

answered Jul 31, 2012 at 9:33

dead

3642 silver badges10 bronze badges

1 Comment

Elvis Over a year ago

You're right, this may be one solution, but in this case, i was looking for a client-side "pre-validation".

Collectives™ on Stack Overflow

jQuery textfield validation against json / array

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related