Async form field validation in ant design
How to validate form fields asynchronously in ant design?
<FormItem>
{getFieldDecorator('zipcode', {
initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
rules: [
// { required: true, message: 'Please input your Zipcode' },
{ validator: this.handlezipCodeChange },
],
})(
<Input
prefix={
<Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
}
type="number"
placeholder="Zipcode"
// onChange={this.handlezipCodeChange}
/>
)}
</FormItem>
function call
handlezipCodeChange = (rule, value, callback) => {
if (!value) {
callback('Please input your zipcode');
}
if (value.length < 5) {
callback('Please enter minimum length of 5');
}
if (value.length > 5) {
callback('Please enter maximum length of 5');
}
if (value.length === 5) {
const validateZipCode = validateZipcode(value);
if (
validateZipCode &&
validateZipCode.result &&
validateZipCode.result.zipcodeInfo === null
) {
callback('Seems to be Invalid Zipcode');
} else {
callback();
}
}
};
export async function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
How to show the error message from api response? As api call takes some time to complete at that time the validation function call get executed completely before api request complete. So how can i show the error message?
async-await antd ant-design-pro
add a comment |
How to validate form fields asynchronously in ant design?
<FormItem>
{getFieldDecorator('zipcode', {
initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
rules: [
// { required: true, message: 'Please input your Zipcode' },
{ validator: this.handlezipCodeChange },
],
})(
<Input
prefix={
<Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
}
type="number"
placeholder="Zipcode"
// onChange={this.handlezipCodeChange}
/>
)}
</FormItem>
function call
handlezipCodeChange = (rule, value, callback) => {
if (!value) {
callback('Please input your zipcode');
}
if (value.length < 5) {
callback('Please enter minimum length of 5');
}
if (value.length > 5) {
callback('Please enter maximum length of 5');
}
if (value.length === 5) {
const validateZipCode = validateZipcode(value);
if (
validateZipCode &&
validateZipCode.result &&
validateZipCode.result.zipcodeInfo === null
) {
callback('Seems to be Invalid Zipcode');
} else {
callback();
}
}
};
export async function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
How to show the error message from api response? As api call takes some time to complete at that time the validation function call get executed completely before api request complete. So how can i show the error message?
async-await antd ant-design-pro
Isn’t there anawait
missing before therequest
? Likereturn await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await
– Matthi
Nov 24 '18 at 9:52
add a comment |
How to validate form fields asynchronously in ant design?
<FormItem>
{getFieldDecorator('zipcode', {
initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
rules: [
// { required: true, message: 'Please input your Zipcode' },
{ validator: this.handlezipCodeChange },
],
})(
<Input
prefix={
<Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
}
type="number"
placeholder="Zipcode"
// onChange={this.handlezipCodeChange}
/>
)}
</FormItem>
function call
handlezipCodeChange = (rule, value, callback) => {
if (!value) {
callback('Please input your zipcode');
}
if (value.length < 5) {
callback('Please enter minimum length of 5');
}
if (value.length > 5) {
callback('Please enter maximum length of 5');
}
if (value.length === 5) {
const validateZipCode = validateZipcode(value);
if (
validateZipCode &&
validateZipCode.result &&
validateZipCode.result.zipcodeInfo === null
) {
callback('Seems to be Invalid Zipcode');
} else {
callback();
}
}
};
export async function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
How to show the error message from api response? As api call takes some time to complete at that time the validation function call get executed completely before api request complete. So how can i show the error message?
async-await antd ant-design-pro
How to validate form fields asynchronously in ant design?
<FormItem>
{getFieldDecorator('zipcode', {
initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
rules: [
// { required: true, message: 'Please input your Zipcode' },
{ validator: this.handlezipCodeChange },
],
})(
<Input
prefix={
<Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
}
type="number"
placeholder="Zipcode"
// onChange={this.handlezipCodeChange}
/>
)}
</FormItem>
function call
handlezipCodeChange = (rule, value, callback) => {
if (!value) {
callback('Please input your zipcode');
}
if (value.length < 5) {
callback('Please enter minimum length of 5');
}
if (value.length > 5) {
callback('Please enter maximum length of 5');
}
if (value.length === 5) {
const validateZipCode = validateZipcode(value);
if (
validateZipCode &&
validateZipCode.result &&
validateZipCode.result.zipcodeInfo === null
) {
callback('Seems to be Invalid Zipcode');
} else {
callback();
}
}
};
export async function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
How to show the error message from api response? As api call takes some time to complete at that time the validation function call get executed completely before api request complete. So how can i show the error message?
async-await antd ant-design-pro
async-await antd ant-design-pro
edited Nov 24 '18 at 20:05
Matthi
562212
562212
asked Nov 23 '18 at 19:06
Srikanth GowdaSrikanth Gowda
3332417
3332417
Isn’t there anawait
missing before therequest
? Likereturn await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await
– Matthi
Nov 24 '18 at 9:52
add a comment |
Isn’t there anawait
missing before therequest
? Likereturn await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await
– Matthi
Nov 24 '18 at 9:52
Isn’t there an
await
missing before the request
? Like return await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await– Matthi
Nov 24 '18 at 9:52
Isn’t there an
await
missing before the request
? Like return await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await– Matthi
Nov 24 '18 at 9:52
add a comment |
1 Answer
1
active
oldest
votes
You're missing await
before validateZipcode
and async
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
also, as mentioned in comment, you need to add await
to your validateZipcode
function:
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You need to add it because actually, it's impossible to catch completeness of async operation in sync function.
Other solution is to unmark async
from validateZipcode
, and next use it as Promise-based:
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
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%2f53451845%2fasync-form-field-validation-in-ant-design%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You're missing await
before validateZipcode
and async
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
also, as mentioned in comment, you need to add await
to your validateZipcode
function:
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You need to add it because actually, it's impossible to catch completeness of async operation in sync function.
Other solution is to unmark async
from validateZipcode
, and next use it as Promise-based:
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
add a comment |
You're missing await
before validateZipcode
and async
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
also, as mentioned in comment, you need to add await
to your validateZipcode
function:
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You need to add it because actually, it's impossible to catch completeness of async operation in sync function.
Other solution is to unmark async
from validateZipcode
, and next use it as Promise-based:
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
add a comment |
You're missing await
before validateZipcode
and async
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
also, as mentioned in comment, you need to add await
to your validateZipcode
function:
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You need to add it because actually, it's impossible to catch completeness of async operation in sync function.
Other solution is to unmark async
from validateZipcode
, and next use it as Promise-based:
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You're missing await
before validateZipcode
and async
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
also, as mentioned in comment, you need to add await
to your validateZipcode
function:
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
You need to add it because actually, it's impossible to catch completeness of async operation in sync function.
Other solution is to unmark async
from validateZipcode
, and next use it as Promise-based:
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
edited Nov 24 '18 at 10:14
answered Nov 24 '18 at 9:56
AlexAlex
3,235621
3,235621
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
add a comment |
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
1
1
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
thanks @Alex, it worked.
– Srikanth Gowda
Nov 28 '18 at 12:35
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53451845%2fasync-form-field-validation-in-ant-design%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
Isn’t there an
await
missing before therequest
? Likereturn await request(
/api/getZipcodeInfo?zipcode=${zipcode});
Btw: nice article about async await: jakearchibald.com/2017/await-vs-return-vs-return-await– Matthi
Nov 24 '18 at 9:52