From 9772e61e57beb2e30cf2c1486acfe7b88e321b4b Mon Sep 17 00:00:00 2001 From: Raymond Camden Date: Thu, 5 Dec 2019 09:33:49 -0600 Subject: [PATCH 1/7] Update form-validation.md Updates the server side code. Fixes #2391 --- src/v2/cookbook/form-validation.md | 35 ++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 6fd34c1263..bb5965e239 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -333,21 +333,34 @@ We set up the total value as a computed value, and outside of that bug I ran int ## Server-side Validation -In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [OpenWhisk](http://openwhisk.apache.org/) serverless action to do the validation. While it isn't terribly important, here is the logic: +In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [Netlify](https://netlify.com/) serverless action to do the validation. While it isn't terribly important, here is the logic: ``` js -function main(args) { - return new Promise((resolve, reject) => { - // bad product names: vista, empire, mbp - const badNames = ['vista', 'empire', 'mbp']; - - if (badNames.includes(args.name)) { - reject({error: 'Existing product'}); - } +exports.handler = async (event, context) => { + + const badNames = ['vista', 'empire', 'mbp']; + let name = event.queryStringParameters.name; + + if (badNames.includes(name)) { + return { + statusCode: 200, + headers:{ + 'Access-Control-Allow-Origin':'*' + }, + body: JSON.stringify({error:'Invalid name passed.'}) + } + } else { + return { + statusCode: 200, + headers:{ + 'Access-Control-Allow-Origin':'*' + }, + body: JSON.stringify({ status: 'ok' }) + } + } - resolve({status: 'ok'}); - }); } + ``` Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form. From 833c1a6406d4b13c7192db96f317a24e73e270db Mon Sep 17 00:00:00 2001 From: Raymond Camden Date: Sun, 15 Dec 2019 09:08:46 -0600 Subject: [PATCH 2/7] Update form-validation.md I removed the server side code and updated the form code to use the right URL. --- src/v2/cookbook/form-validation.md | 34 ++---------------------------- 1 file changed, 2 insertions(+), 32 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index bb5965e239..1b16dac957 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -333,37 +333,7 @@ We set up the total value as a computed value, and outside of that bug I ran int ## Server-side Validation -In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [Netlify](https://netlify.com/) serverless action to do the validation. While it isn't terribly important, here is the logic: - -``` js -exports.handler = async (event, context) => { - - const badNames = ['vista', 'empire', 'mbp']; - let name = event.queryStringParameters.name; - - if (badNames.includes(name)) { - return { - statusCode: 200, - headers:{ - 'Access-Control-Allow-Origin':'*' - }, - body: JSON.stringify({error:'Invalid name passed.'}) - } - } else { - return { - statusCode: 200, - headers:{ - 'Access-Control-Allow-Origin':'*' - }, - body: JSON.stringify({ status: 'ok' }) - } - } - -} - -``` - -Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form. +In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [Netlify](https://netlify.com/) serverless action to do the validation. That exact code of the serverless action isn't relevant, but will return an error if the name is `vista`, `empire`, or `mbp`. Here's our form. ``` html
Date: Wed, 18 Dec 2019 09:37:10 -0600 Subject: [PATCH 3/7] Update form-validation.md Update related to comments. --- src/v2/cookbook/form-validation.md | 42 +++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 1b16dac957..fb09a78af7 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -333,7 +333,30 @@ We set up the total value as a computed value, and outside of that bug I ran int ## Server-side Validation -In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [Netlify](https://netlify.com/) serverless action to do the validation. That exact code of the serverless action isn't relevant, but will return an error if the name is `vista`, `empire`, or `mbp`. Here's our form. +In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [Netlify](https://netlify.com/) serverless action to do the validation. While it isn't terribly important, here is the logic: + +``` js +exports.handler = async (event, context) => { + + const badNames = ['vista', 'empire', 'mbp']; + const name = event.queryStringParameters.name; + + if (badNames.includes(name)) { + return { + statusCode: 400, + body: JSON.stringify({error:'Invalid name passed.'}) + } + } else { + return { + statusCode: 204 + } + } + +} + +``` + +Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form. ``` html res.json()) - .then(res => { - if (res.error) { - this.errors.push(res.error); - } else { -            // redirect to a new URL, or do something on success - alert('ok!'); + fetch(apiUrl+encodeURIComponent(this.name)) + .then(async res => { + if(res.status === 204) { + alert('Ok!') + } else if(res.status === 400) { + let errorResponse = await res.json(); + this.errors.push(errorResponse.error); } - }); + }); } } } From e4894050b455aecb1cf64211fea2600a7cf3873a Mon Sep 17 00:00:00 2001 From: Phan An Date: Wed, 4 Mar 2020 16:47:30 +0100 Subject: [PATCH 4/7] Update src/v2/cookbook/form-validation.md --- src/v2/cookbook/form-validation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index fb09a78af7..b20c19866c 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -412,11 +412,11 @@ const app = new Vue({ if (this.name === '') { this.errors.push('Product name is required.'); } else { - fetch(apiUrl+encodeURIComponent(this.name)) + fetch(apiUrl + encodeURIComponent(this.name)) .then(async res => { - if(res.status === 204) { - alert('Ok!') - } else if(res.status === 400) { + if (res.status === 204) { + alert('OK') + } else if (res.status === 400) { let errorResponse = await res.json(); this.errors.push(errorResponse.error); } From b967f48b27f149ec695a0ab9ecd8cdecd4669e50 Mon Sep 17 00:00:00 2001 From: Phan An Date: Wed, 4 Mar 2020 16:48:03 +0100 Subject: [PATCH 5/7] Update src/v2/cookbook/form-validation.md --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index b20c19866c..53a3c709e3 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -420,7 +420,7 @@ const app = new Vue({ let errorResponse = await res.json(); this.errors.push(errorResponse.error); } - }); + }); } } } From 6f075ebf93a952e27ae753104cfc5521c9df4a6e Mon Sep 17 00:00:00 2001 From: Phan An Date: Wed, 4 Mar 2020 16:48:19 +0100 Subject: [PATCH 6/7] Update src/v2/cookbook/form-validation.md --- src/v2/cookbook/form-validation.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 53a3c709e3..0ed062154f 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -344,14 +344,14 @@ exports.handler = async (event, context) => { if (badNames.includes(name)) { return { statusCode: 400, - body: JSON.stringify({error:'Invalid name passed.'}) - } - } else { - return { - statusCode: 204 + body: JSON.stringify({error: 'Invalid name passed.'}) } } + return { + statusCode: 204 + } + } ``` From 460b30138d946bdb12810835bcc45461ee6bf2de Mon Sep 17 00:00:00 2001 From: Phan An Date: Wed, 4 Mar 2020 16:49:46 +0100 Subject: [PATCH 7/7] Update src/v2/cookbook/form-validation.md --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 0ed062154f..80e65bfda0 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -415,7 +415,7 @@ const app = new Vue({ fetch(apiUrl + encodeURIComponent(this.name)) .then(async res => { if (res.status === 204) { - alert('OK') + alert('OK'); } else if (res.status === 400) { let errorResponse = await res.json(); this.errors.push(errorResponse.error);