提交表单之前使用ajax验证字段

Question

I've just started creating a form validator, and came across a puzzling problem. If I'm validating a simple field (say, password), I can do that on the client side alone (not that I mean I won't validate it on the server). What I mean is I can do the validation on the client machine without any external checks.

If I'm validating a more complex field (username), this requires external check. For example, in a registration form, I want to validate the username (make sure it doesn't exist). To do that I'd have to make an ajax call. This complicates things a little. Examine the code below.

FormValidator.prototype.validate = function validateForm() {
    this.errors = {};
    for (var fieldName in this.fields) {
        var field = this.fields[fieldName];

        if (field.hasOwnProperty("required") && field.required && field.elem.value.length == 0) {
            this.addError(fieldName, "This field is required.");
            break;
        }

        if (field.hasOwnProperty("minLength") && field.elem.value.length < field.minLength) {
            this.addError(fieldName, "Input length should not be less than  " + field.minLength + " characters.");
            break;
        }

        if (field.hasOwnProperty("maxLength") && field.elem.value.length > field.maxLength) {
            this.addError(fieldName, "Input length should not be greater than" + field.maxLength + " characters.");
            break;
        }

        if (field.hasOwnProperty("ajax")) {
            // FormValidator can't possibly know what the call will return, so we can't add the error here
            // it has to be done manually
            field.ajax(this, field, fieldName);
        }
    }
    if (this.errors.length != 0) {
        // warn the user
        console.log(this.errors);
    }
};

var fv = new FormValidator(document.forms[0]);

fv.addField("login_name", {
    type      : "text",
    minLength : 4,
    maxLength : 32,
    required  : true,
    ajax      : function (fv, field, fieldName) {
        ajax("http://localhost/surec/scripts/user_check.php?field=login_name&value=" + field.elem.value, {
            success : function () {
                var response = JSON.parse(this.response);
                // manually adding the error
                if (!response.error && response.exists) {
                    fv.addError(fieldName, "This username is taken.");
                }
            },
            // async: false,
        });
    },
});

// called on form submit
// fv.validate();

The moment fv.validate() is called (assuming the user entered a taken username), validate() won't do anything to warn the user, because the ajax call is asynchronous. When the error check is done if (this.errors.length != 0) { , errors will be empty. It'll be populated when the ajax call is done, and then it's too late.

To fix this, I can make the ajax call synchronous. This solves the problem, but I'm not sure about using a synchronous call. Is this approach valid or is there an alternative approach that I can take?

---

Update : I've started looking into Promise, and I think I'm getting the hang of it. I've made it work to some point, so I still need some help.

Graphical depiction of what I'm trying to do would be something like this:

I've created an async loop function that I'll be using to loop the fields:

async function asyncForEach(array, callback) {
    for (let index = 0; index < array.length; index++) {
        await callback(array[index], index, array);
    }
}

and the current state of the validate function:

FormValidator.prototype.validate = async function validateForm() {
    this.errors = {};
    var self = this;

    await asyncForEach(self.fields.keys(), async function (fieldName) {
        var field = self.fields[fieldName];

        if (field.hasOwnProperty("required") && field.required && field.elem.value.length == 0) {
            self.addError(fieldName, "This field is required.");
            // break;
        }

        if (field.hasOwnProperty("minLength") && field.elem.value.length < field.minLength) {
            self.addError(fieldName, "Input length should not be less than " + field.minLength + " characters.");
            // break;
        }

        if (field.hasOwnProperty("maxLength") && field.elem.value.length > field.maxLength) {
            self.addError(fieldName, "Input length should not be greater than " + field.maxLength + " characters.");
            // break;
        }

        if (field.hasOwnProperty("ajax")) {
            // FormValidator can't possibly know what the call will return, so we can't add the error here
            // it has to be done manually
            await field.ajax(self, field, fieldName);
        }

    });

    if (self.errors.length() != 0) {
        // warn the user
        console.log("errors: ", self.errors);
    }
};

This appears to work (in a test case). See below. I'm not using an ajax function, but faked it (using a 1 second delay). console.log("errors: ", self.errors); in fv.validate() runs after the external check (fake ajax) is done (1s delay).

var fv = new FormValidator(document.forms[0]);

fv.addField("login_name", {
    type      : "text",
    minLength : 4,
    maxLength : 32,
    required  : true,
    ajax : async function (fv, field, fieldName) {
        // assume delay is ajax
        await delay(1000);
        // and on success (and login_name collision) we add an error
        fv.addError(fieldName, "This username is taken.");
    },
});

var delay = (ms) => new Promise(r => setTimeout(r, ms));

fv.validate();

Now, I need to rewrite the external check method ( ajax ) and make it work with this code. I've tried a few combinations (probably nonsense, using trial-error), but couldn't make it work. How should I proceed?

FormValidator.js (GitHub repo)

Answer 1

Here one possible implementation with promises. It's a simplified example that just focuses on managing an array of errors where one is the result of an ajax call

 // errors is an array of promises const errors = ["Too long"] const remoteErrorCheck = $.ajax({type:"GET", url:'https://api.stackexchange.com/2.2/info?site=stackoverflow'}).then(function(data){ // here you have access to the result of ajax request, inside data return Promise.resolve("error or ok") // you want to return a promise to put in the array of promises }) // now put the promise from the ajax request into the array of promises errors.push(remoteErrorCheck) // when all the promises are resolved, then do something with the results Promise.all(errors).then((a)=>{ console.log(a) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Note that Promise.all waits for ajax to complete before executing. Strings are treated by Promise.all as already resolved promises.

Since remoteErrorCheck already has a .then also that one is executed and since it returns a promise, the Promise of Promise is squashed into just one promise, and that's why you can access the error or ok string in the array of errors

This needs to be adapted for your case (objects instead of strings, validation function inside the then should be passed from outside, ...) but it should be a good starting point

Answer 2

I've managed to solve the problem. Instead of using a custom ajax function/lib, I've decided to use fetch .

Using it alone (without await) didn't work, so I had to add it. And now it works.

fv.addField("login_name", {
    type      : "text",
    minLength : 4,
    maxLength : 32,
    required  : true,
    ajax : async function (fv, field, fieldName) {
        await fetch("http://localhost/surec/scripts/user_check.php?field=login_name&value=" + field.elem.value)
        .then(function (response) {
            return response.json();
        }).then(function (response) {
            if (!response.error && response.exists) {
                fv.addError(fieldName, "This username is taken.");
            }
        });
    },
});

Although this works at the moment, I'm not sure if this will cause problems in the future. If it does, I'll update this QA.