3

I have a javascript function that posts data to a validation script and grabs a value from there. The callback function on the post request returns a boolean value, and I'm trying to get the entire function to return that boolean value. Right now, the callback function returns the correct value, but the function itself doesn't return anything. Here's the code:

function validate(request_type, request_text) {
    $.post("http://www.example.com/ajax/validate.php",{
        type: request_type, 
        text: request_text
    }, function(data) {
        return (data == "valid");
    });
}

I realise that this is sort of a "synchronous" call, and that's not what AJAX is about, but I already have numerous functions in validate.php (database calls, etc.) that I can't implement in Javascript, and I saw threads like this one that talk about using some form of handler.

How would I write a simple handler that will make either the variable data or the result of the boolean comparison data == "valid" available when I use it in an if/else statement (which is where this function is supposed to be used)?

EDIT: For example, one of the if statements that will be using the boolean result:

if (!validate('password',pass_new)) {
        $('#pass_new').addClass('error');
        $('#pass_confirm_new').addClass('error');
        $(error_string.format('Please enter a valid password.')).insertAfter('#pass_confirm_new');
        $('#pass_text_short').hide();
        $('#pass_text_long').show();

EDIT: The function called with the onsubmit event in my HTML form:

function valid_pass_sett() {
    //code to remove errors left over from previous submissions - snipped
    pass_old = $('input[name=pass_old]').val();
    pass_new = $('input[name=pass_new]').val();
    pass_confirm_new = $('input[name=pass_confirm_new]').val();
    //some if statements that don't involve AJAX requests - snipped
    if (!validate('password',pass_new)) {
        $('#pass_new').addClass('error');
        $('#pass_confirm_new').addClass('error');
        $(error_string.format('Please enter a valid password.')).insertAfter('#pass_confirm_new');
        $('#pass_text_short').hide();
        $('#pass_text_long').show();
        return false;
    }

    return true;
}

I haven't edited this code to include the updated code that's been posted, but my question is how I return false from it to stop form submission?

Community
  • 1
  • 1
Ricardo Altamirano
  • 14,650
  • 21
  • 72
  • 105
  • I had the same problem, was offered solutions. and ended up re factoring my code to meet my needs as this cannot be done _nicely_ read here http://stackoverflow.com/questions/6877318/jquery-post-in-a-function-wait-for-callback-to-define-the-return – rlemon Aug 11 '11 at 21:12
  • what are you trying to do with the returned value, show more code – Johnny Craig Aug 11 '11 at 21:13
  • you could try posting the validation request then once you have the data call a function that will process it. Just also pass the parent element identifier with the data and you can run the validation function as a large switch->case – rlemon Aug 11 '11 at 21:15
  • When using *asynchronous* code, you're going to just have to let go of the hope of using the return value of your `validate()` function. It simply won't work. You need to accommodate your code to fit into the asynchronous flow. – user113716 Aug 11 '11 at 21:24

4 Answers4

7
function validate(request_type, request_text, callback) {
    $.post("http://www.example.com/ajax/validate.php",{
        type: request_type, 
        text: request_text
    }, function(data) {
        callback(data == "valid");
    });
}

And usage would be:

validate(request_type, request_text, function (isValid) {
    if(isValid) { 
        // do something
    } else {
        // do something if invalid
    }
});
Paul Bönisch
  • 294
  • 2
  • 10
hazzik
  • 13,019
  • 9
  • 47
  • 86
4

Unless you make a synchronous AJAX call (which you probably don't want to do), you simply can't.

If this function is used in several places in your code, your best bet may be to allow it to receive a function.

That way instead of relying on the result being returned from your function to be used in some code, you're actually passing your code directly in, so it is ensured to be able to use the response.

var my_form = $('#my_form');

my_form.submit( valid_pass_sett );

function valid_pass_sett() {
    //code to remove errors left over from previous submissions - snipped
    pass_old = $('input[name=pass_old]').val();
    pass_new = $('input[name=pass_new]').val();
    pass_confirm_new = $('input[name=pass_confirm_new]').val();

    validate('password', pass_new, pswd_validation_callback); // async validation

    return false;  // cancel form submission
}

function validate(request_type, request_text, callback ) {
    $.post("http://www.example.com/ajax/validate.php",{
        type: request_type, 
        text: request_text
    }, callback );
}

function pswd_validation_callback( data ) {
    if ( data === 'valid' ) {
         // if valid, call the native .submit() instead of the jQuery one
        my_form[ 0 ].submit();
    } else {
         // Otherwise do your thing for invalid passwords.
         // The form has already been canceled, so no concerns there.
        $('#pass_new').addClass('error');
        $('#pass_confirm_new').addClass('error');
        $(error_string.format('Please enter a valid password.')).insertAfter('#pass_confirm_new');
        $('#pass_text_short').hide();
        $('#pass_text_long').show();
    }
}

EDIT: Changed to use code posted in question.

EDIT: Updating to work with additional code posted. Narrowing answer down to the named function for clarity.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • That looks like my best option; how does this fit into form validation, though? I call another function (the one that contains all of the if/else statements, some of which use the validate() function) with the onsubmit event of my form, which will only stop form submission if it returns false. I'll edit my answer to include the code for that function as well. – Ricardo Altamirano Aug 11 '11 at 22:03
  • 1
    @pythonscript: What you need to do is halt the submission *immediately*, do the asynchronous validation passing in the code that needs the result of the validation, then if successful, re-submit. You'll want to probably use the native `.submit()` function so that the jQuery code isn't run again. The main point is that the submission can't wait for asynchronous code to determine if it should be allowed. It should be presumed that it is *not* allowed, and then once validated, be re-submitted without validation. I'll update my answer. – user113716 Aug 11 '11 at 22:33
  • ...also, please remember that validation on the client side is easily disabled. You probably know this, but just thought I'd make sure that you were also validating server-side. – user113716 Aug 11 '11 at 22:34
  • 1
    @pythonscript: I just updated. Yes, except that you do *not* want to call jQuery's `.submit()`, because it will just trigger your code again, and you'll end up in an infinite loop. Instead trigger `.submit()` on the native DOM element, so that the form is submitted without validation (since it's already been validated). Now, you *could* place all the code in your `valid_pass_sett()` function, and trigger that, but you'd want it to receive an argument you can test, so that when you re-trigger it, you'll only run the `validate()` function if it was called on the first pass, instead of the redo. – user113716 Aug 11 '11 at 22:49
1
function validate(request_type, request_text) {
$.post("http://www.example.com/ajax/validate.php",{
    type: request_type, 
    text: request_text
}, function(data) {
    return (data == "valid");
}); }

You can't really return from 'validate' the result of the AJAX call. You could try declare a variable before the $.post call, let's call it 'x', and inside the response function assign the value to that variable (x=data=="valid"), and outside the $.post block, but inside the 'validate' function, return that value.

function validate(request_type, request_text) {
var x;
$.post("http://www.example.com/ajax/validate.php",{
    type: request_type, 
    text: request_text
}, function(data) {
    x = data == "valid";
});
return x; }

The real problem is that the function 'validate' will continue even if the post call haven't return any value, so it will always be 'false'.

The best thing you can do is call another function INSIDE the response function, so you can assure that the server call is over before getting to the next part.

Edit:

It's been a long time since I posted this answer. The world has changed and so AJAX calls.

Now we have promises ;)

You still cannot return a direct value from a function, but you can return a Promise object, which can be chanined to another Promise, and the second promise will get the data you returned from the first one.

function validate(request_type, request_text) {

   var promise = $.ajax("http://www.example.com/ajax/validate.php",{
       type: request_type, 
      text: request_text
   });

function getStuff(data) {
    //Do something and return the data to the next promise
    return data;
}

promise.then(getStuff).then(function(data){
    // Do something else with data
});

}
pfernandom
  • 929
  • 10
  • 22
0

If I understand this question correctly you can achieve what you want by simply storing the returned value into a HTML element and then return that elements value from your custom function:

    function validate(request_type, request_text){

       $.post("http://www.example.com/ajax/validate.php",{
          type: request_type, 
          text: request_text}, 
          function(data) {
             $('#someElement').text(data); 
          });

       //return the data by getting the value of the html element
       return $('#someElement').text();
}
PowerAktar
  • 2,341
  • 1
  • 21
  • 17
  • this will not work because the $.post may still be working before it can place the value... and if it is and the function returns the .text() it will have the old value. – moeiscool Oct 06 '16 at 01:55