Skip to content

Fix code style in Form Validation recipe #1682

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 2 commits into from
Jun 17, 2018
Merged

Fix code style in Form Validation recipe #1682

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d460177
Fix code style in Form Validation recipe
lex111 Jun 11, 2018
faa0e0f
More style code slight improvement in Form Validation recipe
lex111 Jun 17, 2018
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
139 changes: 82 additions & 57 deletions src/v2/cookbook/form-validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,28 @@ The final thing to note is that each of the three fields has a corresponding `v-

``` js
const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
el: '#app',
data: {
errors: [],
name: null,
age: null,
movie: null
},
methods:{
checkForm:function(e) {
if(this.name && this.age) return true;
checkForm: function (e) {
if (this.name && this.age) {
return true;
}

this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.age) this.errors.push("Age required.");

if (!this.name) {
this.errors.push('Name required.');
}
if (!this.age) {
this.errors.push('Age required.');
}

e.preventDefault();
}
}
Expand Down Expand Up @@ -122,26 +131,33 @@ While the change here is small, note the `novalidate="true"` on top. This is imp

``` js
const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
email:null,
movie:null
el: '#app',
data: {
errors: [],
name: null,
email: null,
movie: null
},
methods:{
checkForm:function(e) {
methods: {
checkForm: function (e) {
this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.email) {
this.errors.push("Email required.");
} else if(!this.validEmail(this.email)) {
this.errors.push("Valid email required.");

if (!this.name) {
this.errors.push("Name required.");
}
if (!this.email) {
this.errors.push('Email required.');
} else if (!this.validEmail(this.email)) {
this.errors.push('Valid email required.');
}

if (!this.errors.length) {
return true;
}
if(!this.errors.length) return true;

e.preventDefault();
},
validEmail:function(email) {
validEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
Expand Down Expand Up @@ -197,29 +213,36 @@ Note the set of inputs covering the five different features. Note the addition o

``` js
const app = new Vue({
el:'#app',
el: '#app',
data:{
errors:[],
weapons:0,
shields:0,
coffee:0,
ac:0,
mousedroids:0
errors: [],
weapons: 0,
shields: 0,
coffee: 0,
ac: 0,
mousedroids: 0
},
computed:{
total:function() {
// must parse cuz Vue turns empty value to string
return Number(this.weapons)+
Number(this.shields)+
Number(this.coffee)+
computed: {
total: function () {
// must parse because Vue turns empty value to string
return Number(this.weapons) +
Number(this.shields) +
Number(this.coffee) +
Number(this.ac+this.mousedroids);
}
},
methods:{
checkForm:function(e) {
checkForm: function (e) {
this.errors = [];
if(this.total != 100) this.errors.push("Total must be 100!");
if(!this.errors.length) return true;

if (this.total != 100) {
this.errors.push('Total must be 100!');
}

if (!this.errors.length) {
return true;
}

e.preventDefault();
}
}
Expand All @@ -237,16 +260,16 @@ In my final example, we built something that makes use of Ajax to validate at th

``` js
function main(args) {

return new Promise((resolve, reject) => {

// bad product names: vista, empire, mbp
let badNames = ['vista','empire','mbp'];
if(badNames.includes(args.name)) reject({error:'Existing product'});
resolve({status:'ok'});

const badNames = ['vista', 'empire', 'mbp'];

if (badNames.includes(args.name)) {
reject({error: 'Existing product'});
}

resolve({status: 'ok'});
});

}
```

Expand Down Expand Up @@ -280,22 +303,24 @@ There isn't anything special here. So let's go on to the JavaScript.
const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';

const app = new Vue({
el:'#app',
data:{
errors:[],
name:''
el: '#app',
data: {
errors: [],
name: ''
},
methods:{
checkForm:function(e) {
checkForm: function (e) {
e.preventDefault();

this.errors = [];
if(this.name === '') {
this.errors.push("Product name is required.");

if (this.name === '') {
this.errors.push('Product name is required.');
} else {
fetch(apiUrl+encodeURIComponent(this.name))
fetch(apiUrl + encodeURIComponent(this.name))
.then(res => res.json())
.then(res => {
if(res.error) {
if (res.error) {
this.errors.push(res.error);
} else {
           // redirect to a new URL, or do something on success
Expand Down