Skip to content

Update form-validation.md #2410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 4, 2020
Merged

Update form-validation.md #2410

Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9772e61
Update form-validation.md
cfjedimaster Dec 5, 2019
833c1a6
Update form-validation.md
cfjedimaster Dec 15, 2019
bddc23c
Update form-validation.md
cfjedimaster Dec 18, 2019
e489405
Update src/v2/cookbook/form-validation.md
phanan Mar 4, 2020
b967f48
Update src/v2/cookbook/form-validation.md
phanan Mar 4, 2020
6f075eb
Update src/v2/cookbook/form-validation.md
phanan Mar 4, 2020
460b301
Update src/v2/cookbook/form-validation.md
phanan Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 2 additions & 19 deletions src/v2/cookbook/form-validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,24 +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 [OpenWhisk](http://openwhisk.apache.org/) 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'});
}

resolve({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
<form
Expand Down Expand Up @@ -389,7 +372,7 @@ Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's
There isn't anything special here. So let's go on to the JavaScript.

``` js
const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
const apiUrl = 'https://vuecookbook.netlify.com/.netlify/functions/product-name?name=';

const app = new Vue({
el: '#app',
Expand Down