Checking for unique username with jQuery Validate

Question

this is related to jquery-validate

I am trying to improve jquery validate on my site, by adding an option that I call "unique" that checks if a chosen username is already used by another user or not. To do so I check in AJAX on my DB if the username is unique or not (this works), however this.optional( element ) does not work... I think it is because "this" is not referring to "unique" anymore when on the function but I can't see a way around it.... I spent 3 hours on it looking on the web for the answer but can't find what's going on...

unique: function( value, element )
{
   $.post('includes/userunique.php',{uname:value},
   function(response,status)
   {
      return this.optional( element ) || response > 0;
    });
}

Why reinvent the wheel? IMO @Barmar, the OP should be using `remote` to check if a name is taken, and that would be a duplicate of this one: http://stackoverflow.com/q/16577120/594235 — Sparky, Oct 26 '16 at 23:52
@Sparky Didn't read carefully, so I didnt notice that this was related to jquery-validate, just saw the async problem. — Barmar, Oct 27 '16 at 00:00
To the OP: the `this` from `this.optional(element)` changes its meaning when you put inside the `$.post()` function. If you insist on this approach, save your ajax response in a variable and do your `return` from ***outside*** of the `$.post()`. Otherwise, simply implement the `remote` function as per the duplicate. — Sparky, Oct 27 '16 at 00:50

score 0 · Answer 1 · answered Oct 26 '16 at 22:12

0

Method post is async, you won't be able to get the result from ajax call like that. Async means that code execution is not waiting for the ajax call to finish.

Method post returns a promise with callbacks methods for done, fail and always where you can evaluate result or react to an error.

For more information check post official documentation

answered Oct 26 '16 at 22:12

Claudio Redi

67,454
15
130
155

Thanks, I understand, however, is there any way to change it a bit and integrate the change of the element directly within the function like: unique: function( value, element ) { free = $.post('includes/userunique.php',{uname: value},function(response,status){return this.optional( element ) || response > 0;}); } This doesn't work unfortunately as I think "this" is not defined when on the function but I am sure there is something to do? – Iron Oct 26 '16 at 22:15
@Iron: I'm leaving now but I'll try to take a look later, please add your comment as edit in the question as it's hard to read without format. – Claudio Redi Oct 26 '16 at 22:20
thanks a lot mate! will do – Iron Oct 26 '16 at 22:24

score -1 · Answer 2 · answered Oct 26 '16 at 22:49

The syntax you'll need to use as noted by Claudio would be.

unique: function(value, element) {
    $.post('includes/userunique.php', {
        uname: value
    })
    .done(function(response) {
        // Do stuff with the response
    })
    .fail(function() {
        // Handle the error
    })
    .always(function() {
        // Do something regardless of whether successful or failure
    })
}

Checking for unique username with jQuery Validate

2 Answers2