Mixing
Unresolved promises in form validation
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a JS function - checkUsername - that includes an Ajax call. It validates a form input and also validates the same input during submission of the form:
function checkUsername(id) {
var userName = $('#' + id).val().trim();
if(!userName) {
showErr(id, 'An entry is required.');
return Promise.resolve(false);
}
return $.ajax({
type: 'POST',
data:{'checkUsername': userName},
url:'/php/ajax/validation-ajax.php',
})
.then(function(response) {
if(response == 'notfound') {
showErr(id, 'This user is not in the list.');
return(false);
}
else {
clearErr(id);
return(true);
}
})
.fail(function(err) {
// some code
})
}
In the first case, it's called by an event handler. In the second it forms part of a switch statement:
case 'username':
checkUsername(id).then(function(data) {
if(isOK && data !== false) {
// submit form
$('form#adminusers').submit();
}
});
break;
In the form submission case, I think the function promise is correctly handled. But presumably when the function is called by an event handler the promise is left hanging.
Does this matter? Even if I write two versions of the function, one for the event handler and the other for form submission, the event handler version will still have an Ajax call in it and so the promise situation would be no different.
What's the right way of handling this situation?
javascript ajax promise
asked Jan 3 at 14:13
magnolmagnol
4819
add a comment |
I have a JS function - checkUsername - that includes an Ajax call. It validates a form input and also validates the same input during submission of the form:
function checkUsername(id) {
var userName = $('#' + id).val().trim();
if(!userName) {
showErr(id, 'An entry is required.');
return Promise.resolve(false);
}
return $.ajax({
type: 'POST',
data:{'checkUsername': userName},
url:'/php/ajax/validation-ajax.php',
})
.then(function(response) {
if(response == 'notfound') {
showErr(id, 'This user is not in the list.');
return(false);
}
else {
clearErr(id);
return(true);
}
})
.fail(function(err) {
// some code
})
}
In the first case, it's called by an event handler. In the second it forms part of a switch statement:
case 'username':
checkUsername(id).then(function(data) {
if(isOK && data !== false) {
// submit form
$('form#adminusers').submit();
}
});
break;
In the form submission case, I think the function promise is correctly handled. But presumably when the function is called by an event handler the promise is left hanging.
Does this matter? Even if I write two versions of the function, one for the event handler and the other for form submission, the event handler version will still have an Ajax call in it and so the promise situation would be no different.
What's the right way of handling this situation?
javascript ajax promise
asked Jan 3 at 14:13
magnolmagnol
4819
add a comment |
I have a JS function - checkUsername - that includes an Ajax call. It validates a form input and also validates the same input during submission of the form:
function checkUsername(id) {
var userName = $('#' + id).val().trim();
if(!userName) {
showErr(id, 'An entry is required.');
return Promise.resolve(false);
}
return $.ajax({
type: 'POST',
data:{'checkUsername': userName},
url:'/php/ajax/validation-ajax.php',
})
.then(function(response) {
if(response == 'notfound') {
showErr(id, 'This user is not in the list.');
return(false);
}
else {
clearErr(id);
return(true);
}
})
.fail(function(err) {
// some code
})
}
In the first case, it's called by an event handler. In the second it forms part of a switch statement:
case 'username':
checkUsername(id).then(function(data) {
if(isOK && data !== false) {
// submit form
$('form#adminusers').submit();
}
});
break;
In the form submission case, I think the function promise is correctly handled. But presumably when the function is called by an event handler the promise is left hanging.
Does this matter? Even if I write two versions of the function, one for the event handler and the other for form submission, the event handler version will still have an Ajax call in it and so the promise situation would be no different.
What's the right way of handling this situation?
javascript ajax promise
asked Jan 3 at 14:13
magnolmagnol
4819
I have a JS function - checkUsername - that includes an Ajax call. It validates a form input and also validates the same input during submission of the form:
function checkUsername(id) {
var userName = $('#' + id).val().trim();
if(!userName) {
showErr(id, 'An entry is required.');
return Promise.resolve(false);
}
return $.ajax({
type: 'POST',
data:{'checkUsername': userName},
url:'/php/ajax/validation-ajax.php',
})
.then(function(response) {
if(response == 'notfound') {
showErr(id, 'This user is not in the list.');
return(false);
}
else {
clearErr(id);
return(true);
}
})
.fail(function(err) {
// some code
})
}
In the first case, it's called by an event handler. In the second it forms part of a switch statement:
case 'username':
checkUsername(id).then(function(data) {
if(isOK && data !== false) {
// submit form
$('form#adminusers').submit();
}
});
break;
In the form submission case, I think the function promise is correctly handled. But presumably when the function is called by an event handler the promise is left hanging.
Does this matter? Even if I write two versions of the function, one for the event handler and the other for form submission, the event handler version will still have an Ajax call in it and so the promise situation would be no different.
What's the right way of handling this situation?
javascript ajax promise
javascript ajax promise
asked Jan 3 at 14:13
magnolmagnol
4819
asked Jan 3 at 14:13
magnolmagnol
4819
asked Jan 3 at 14:13
magnolmagnol
4819
asked Jan 3 at 14:13
magnolmagnol
4819
asked Jan 3 at 14:13
magnolmagnol
4819
4819
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
It depends.
The most important part is that you fully resolve a promise. Typically when you find an unresolved promise, what you really mean is that the error state isn't resolved. In your particular case, in the switch statement, it looks like the "good" state is resolved by submitting the form, but if there is any error thrown by checkUsername or the form submission, it will throw an unresolved rejection.
Ultimately, you always should have a .fail() or .catch() - depends on what Promises implementation you are using - at the end of any Promise chain to catch errors that crop up anywhere in the chain. You can have multiple.. in your case, you have the .fail() within checkUsername() which can resolve that function's promise with false presumably, but you should have another one at the end still, in case any errors are thrown in form submission.
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
add a comment |
I think in your case, checkUsername(id) function use ajax which already resolved all the promises. so returning ajax will only return the return statement of each function that will be executed like success or failure. all the promises are resolved there only.
But in case of switch statement, you are calling promise on the function that is not returning the promise at all. i.e. checkUsername(id).then(function(data) {});
before using the function you first have to make sure the function returns a promise.
So your checkUsername(id) should return a promise:
checkUsername(id){
return new Promise((resolve, reject) => {
// do something here
});
}
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024025%2funresolved-promises-in-form-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It depends.
The most important part is that you fully resolve a promise. Typically when you find an unresolved promise, what you really mean is that the error state isn't resolved. In your particular case, in the switch statement, it looks like the "good" state is resolved by submitting the form, but if there is any error thrown by checkUsername or the form submission, it will throw an unresolved rejection.
Ultimately, you always should have a .fail() or .catch() - depends on what Promises implementation you are using - at the end of any Promise chain to catch errors that crop up anywhere in the chain. You can have multiple.. in your case, you have the .fail() within checkUsername() which can resolve that function's promise with false presumably, but you should have another one at the end still, in case any errors are thrown in form submission.
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
add a comment |
It depends.
The most important part is that you fully resolve a promise. Typically when you find an unresolved promise, what you really mean is that the error state isn't resolved. In your particular case, in the switch statement, it looks like the "good" state is resolved by submitting the form, but if there is any error thrown by checkUsername or the form submission, it will throw an unresolved rejection.
Ultimately, you always should have a .fail() or .catch() - depends on what Promises implementation you are using - at the end of any Promise chain to catch errors that crop up anywhere in the chain. You can have multiple.. in your case, you have the .fail() within checkUsername() which can resolve that function's promise with false presumably, but you should have another one at the end still, in case any errors are thrown in form submission.
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
add a comment |
It depends.
The most important part is that you fully resolve a promise. Typically when you find an unresolved promise, what you really mean is that the error state isn't resolved. In your particular case, in the switch statement, it looks like the "good" state is resolved by submitting the form, but if there is any error thrown by checkUsername or the form submission, it will throw an unresolved rejection.
Ultimately, you always should have a .fail() or .catch() - depends on what Promises implementation you are using - at the end of any Promise chain to catch errors that crop up anywhere in the chain. You can have multiple.. in your case, you have the .fail() within checkUsername() which can resolve that function's promise with false presumably, but you should have another one at the end still, in case any errors are thrown in form submission.
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
It depends.
The most important part is that you fully resolve a promise. Typically when you find an unresolved promise, what you really mean is that the error state isn't resolved. In your particular case, in the switch statement, it looks like the "good" state is resolved by submitting the form, but if there is any error thrown by checkUsername or the form submission, it will throw an unresolved rejection.
Ultimately, you always should have a .fail() or .catch() - depends on what Promises implementation you are using - at the end of any Promise chain to catch errors that crop up anywhere in the chain. You can have multiple.. in your case, you have the .fail() within checkUsername() which can resolve that function's promise with false presumably, but you should have another one at the end still, in case any errors are thrown in form submission.
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
answered Jan 3 at 16:27
Michael PrattMichael Pratt
2,4771126
2,4771126
add a comment |
add a comment |
I think in your case, checkUsername(id) function use ajax which already resolved all the promises. so returning ajax will only return the return statement of each function that will be executed like success or failure. all the promises are resolved there only.
But in case of switch statement, you are calling promise on the function that is not returning the promise at all. i.e. checkUsername(id).then(function(data) {});
before using the function you first have to make sure the function returns a promise.
So your checkUsername(id) should return a promise:
checkUsername(id){
return new Promise((resolve, reject) => {
// do something here
});
}
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
add a comment |
I think in your case, checkUsername(id) function use ajax which already resolved all the promises. so returning ajax will only return the return statement of each function that will be executed like success or failure. all the promises are resolved there only.
But in case of switch statement, you are calling promise on the function that is not returning the promise at all. i.e. checkUsername(id).then(function(data) {});
before using the function you first have to make sure the function returns a promise.
So your checkUsername(id) should return a promise:
checkUsername(id){
return new Promise((resolve, reject) => {
// do something here
});
}
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
add a comment |
I think in your case, checkUsername(id) function use ajax which already resolved all the promises. so returning ajax will only return the return statement of each function that will be executed like success or failure. all the promises are resolved there only.
But in case of switch statement, you are calling promise on the function that is not returning the promise at all. i.e. checkUsername(id).then(function(data) {});
before using the function you first have to make sure the function returns a promise.
So your checkUsername(id) should return a promise:
checkUsername(id){
return new Promise((resolve, reject) => {
// do something here
});
}
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
I think in your case, checkUsername(id) function use ajax which already resolved all the promises. so returning ajax will only return the return statement of each function that will be executed like success or failure. all the promises are resolved there only.
But in case of switch statement, you are calling promise on the function that is not returning the promise at all. i.e. checkUsername(id).then(function(data) {});
before using the function you first have to make sure the function returns a promise.
So your checkUsername(id) should return a promise:
checkUsername(id){
return new Promise((resolve, reject) => {
// do something here
});
}
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
answered Jan 3 at 17:12
Vinay SheoranVinay Sheoran
31339
31339
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
add a comment |
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
1
1
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
I believe that the function does return a promise - at least the ".then" in the switch statement is happy whatever the result of the tests in the function. The test for missing entry returns "Promise.resolve(false)" and the Ajax call returns a jqXHR object.
– magnol
Jan 3 at 17:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024025%2funresolved-promises-in-form-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
