Created
October 11, 2016 14:02
-
-
Save mkozhukharenko/565ab2dc4928dd8a07c9c9e3e938319a to your computer and use it in GitHub Desktop.
React and MobX form validation - full example here https://github.com/mkozhukharenko/mobx-form-validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// trun {fiels: {email: 'val', err:''}} to {email: 'val'} | |
var getValues = () => { | |
let data = {}; | |
let form = toJS(this.form).fields; | |
Object.keys(form).map(key => { | |
data[key] = form[key].value | |
}); | |
return data | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {action} from 'mobx' | |
var Validator = require('validatorjs'); | |
class LoginFormStore { | |
validationRules = { | |
'email': 'required|email', | |
'password': 'required', | |
}; | |
form = { | |
email: { | |
value: '', | |
error: '' | |
}, | |
password: { | |
value: '', | |
error: '' | |
}, | |
isValid: false | |
} | |
@action | |
onFieldChange = (field, value) => { | |
// update value and do a validation | |
this.form.fields[field].value = value; // set a new value | |
var validation = new Validator({ | |
email: this.from.email.value, | |
password: this.from.email.value | |
}, this.validationRules); | |
this.form.meta.isValid = validation.passes(); // check if a form is valid | |
this.form.fields[field].error = validation.errors.first(field) // set an error if it exists | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var loginFormModel = { | |
fields: { | |
email: { | |
value: '', // binds to input value | |
error: null, // shows beneif the input | |
}, | |
password: { | |
value: '', | |
error: null, | |
}, | |
}, | |
meta: { | |
isValid: true, // is a 'submit' value disabled? | |
error: null, // some generic error | |
}, | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var onFieldChange = (field, value) => { | |
this.form.fields[field].value = value; // set a new value | |
var validation = new Validator(this.getValues(), this.validationRules); | |
this.form.meta.isValid = validation.passes(); // check if a form is valid | |
this.form.fields[field].error = validation.errors.first(field) // set an error if it exist | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = { | |
name: 'John', | |
email: 'not-valid-email' | |
}; | |
var rules = { | |
name: 'required', | |
email: 'required|email' | |
}; | |
var validation = new Validator(data, rules); | |
validation.passes(); // false | |
validation.errors.first('email'); // 'The email format is invalid.' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment