Looking for an alternative to the conditional statement. As you can see from my code, the process is overly repetitious and disorganized. It will become increasingly difficult to maintain code as it grows in size. In order to avoid this situation, I'm looking for alternatives.
function validate(values) {
let errors = {};
// Email Error
if (!values.email) {
errors.email = "Email address is required";
} else if (!/\S+#\S+\.\S+/.test(values.email)) {
errors.email = "Email address is invalid";
}
// Password Error
if (!values.password) {
errors.password = "Password is required";
} else if (values.password.length < 6) {
errors.password = "Password must be 6 or more characters";
}
return errors;
}
You could move some logic into configuration. Try to harmonise checks such that they all depend on regular expressions. So for a minimum length of 6, use /....../ as regular expression. Also make sure the regular expression will not accept an empty string in case the field is considered required.
For example:
// All specifics are encoded here:
const checks = [
{ field: "email", regex: /^\S+#\S+\.\S+$/, name: "Email address", msg: "must be 6 or more characters" },
{ field: "password", regex: /....../, name: "Password", msg: "is invalid" },
];
// ...while this is now (more) generic:
function validate(values) {
const errors = {};
for (const {field, regex, name, msg} of checks) {
if (!regex.test(values[field])) {
errors[field] = name + " " + (values[field] ? msg : "is required");
}
}
return errors;
}
You can access column in a js object by using myObject[nameOfYourColumn]
So we can think build a generic method like this
function validateColumn(object, columnName, format, errors) {
if (!object[columnName]) {
errors[columnName] = `${columnName} is required`;
} else if (!format.test(object[columnName])) {
errors[columnName] = `${columnName} is invalid`;
}
}
your method will become
function validate(values) {
let errors = {};
// Email Error
validateColumn(values, 'email', '/\S+#\S+\.\S+/', errors);
// Password Error
validateColumn(values, 'password', '/^.{6,}$/', errors);
return errors;
}
Right now, the validate function is used for both passwords and emails.
However, this can be split into two functions, one for validating emails, and the other for validating passwords. This helps to decouple the action of validating emails from validating passwords, and makes debugging/maintaining easier.
Also, you can try ternary operators if you want to make your if-else clauses less cluttered.
function validate(values) {
errors = {};
errors.email = validate_email(values.email) == null
? null : validate_email(values.email);
errors.password = validate_password(values.password) == null
? null : validate_password(values.password);
return errors;
}
function validate_email(email) {
if (email == null) {
return "Email address is required";
} else if (!/\S+#\S+\.\S+/.test(values.email)) {
return "Email address is invalid";
}
return null;
}
//validate_password left as an exercise
Related
I'm trying to add a validation chain on an object which contain an array;
this array contain objects that have to be tested differently according to one of the field of the object,
here is an example :
{
"title" : "my title",
"sections" : [
{
"type": "A",
"optionsA" : {...}
},
{
"type": "B",
"optionsB" : {...}
},
{
"type": "A",
"optionsA" : {...}
},
{
"type": "C",
"optionsC" : {...}
},
]
}
is there a way to achieve this ? i tried to use OneOf() with specific test for each section but with no success
while this solution is a bit more work I think it's the most straightforward and maintainable.
Download the Validator & Is-emptypackages
Using this package you can validate and JSON object with a lot of control. So I use it like this to validate my req.body
const Validator = require('validator');
const isEmpty = require('is-empty');
module.exports = function validateRegiterInput(data) {
let errors = {};
//Convert empty fields to a empty string so we can use validator functions
data.firstName = !isEmpty(data.firstName) ? data.firstName : "";
data.lastName = !isEmpty(data.lastName) ? data.lastName : "";
data.email = !isEmpty(data.email) ? data.email : "";
data.password = !isEmpty(data.password) ? data.password : "";
//school, schoolname? tbd
//Name check
if (Validator.isEmpty(data.firstName)) {
errors.firstName = "First name is required!"
}
if (Validator.isEmpty(data.lastName)) {
errors.lastName = "Last name is required!"
}
//Email check
if (Validator.isEmpty(data.email)) {
errors.email = "Email field is required!";
} else if (!Validator.isEmail(data.email)) {
errors.email = "Email is invalid!";
}
//Password check
if (Validator.isEmpty(data.password)) {
errors.password = "Password field is required!";
}
if (!Validator.isLength(data.password, { min: 6, max: 30 })) {
errors.password = "Password must be at least 6 characters!";
}
return {
errors,
isValid: isEmpty(errors)
};
};
So what happens is, I call this function with my data and im able to nest into arrays or objects just using the dot notation.
In the main file, I have this
const { errors, isValid } = validateRegisterInput(req.body);
If there were any errors then they'll be in the errors object. and is valid will be false. Otherwise, if it's empty the is valid is true and you're good to go. I hope this helped. If you need more clarification I'm here to help
Below, I have mentioned my JS code. So, Kindly suggest or guide me that there is any better approach to implement the validation on form submit for react project or is it right approach which i have implemented already?
submitUserForm = (e) => {
e.preventDefault();
const { formError } = this.state;
let valid = true;
if(document.getElementById('useremail').value === "") {
valid = false;
formError.email = "Kindly enter your email id"
}
else {
valid = true;
formError.email = ""
}
if(document.getElementById('userpassword').value === "") {
valid = false;
formError.password = "Kindly enter the password"
}
else {
valid = true;
formError.password = ""
}
if(valid === true) {
this.formSubmitApi();
}
this.setState({
isValid: valid,
formError
})
}
This is how you can improve your code:
submitUserForm = (e) => {
e.preventDefault();
const formError = {}
if(document.getElementById('useremail').value === "") {
formError.email = "Kindly enter your email id"
}
if(document.getElementById('userpassword').value === "") {
formError.password = "Kindly enter the password"
}
Object.keys(formError).length === 0 && this.formSubmitApi();
this.setState({
formError
})
}
First of all, in order to improve your code, you need to have controlled components (Inputs in this case) in order to store your values in the state and then use them in the submitUserForm function, also, instead of valid variable, I'll use a validation function like (Also, make the useremail and userpassword objects, in order to store the errors there):
state = {
useremail: { value: '', error: '' },
userpassword: { value: '', error: '' },
};
validateValue = value => {
return value !== undefined && value !== null && value !== '';
};
submitUserForm = e => {
const { useremail, userpassword } = this.state;
e.preventDefault();
// If both the 'useremail' and the 'userpassword' pass the 'validateValue' validations, then send the data
if (this.validateValue(useremail.value) && this.validateValue(userpassword.value)) {
this.formSubmitApi(useremail.value, userpassword.value);
// After sending the info, we reset our two states to initial state
this.setState({useremail: { value: '', error: '' }, userpassword: { value: '', error: '' } });
} else {
// If 'useremail' don't pass the validation we store the error
if (!this.validateValue(useremail.value)) {
this.setState({ useremail: { value: useremail.value, error: 'Please enter a valid email' }});
}
// If 'userpassword' don't pass the validation we store the error
if (!this.validateValue(userpassword.value)) {
this.setState({ userpassword: { value: userpassword.value, error: 'Please enter a valid password' }});
}
}
};
I think this is a more clean approach, you only have to states instead of three as before and you can get all the information that you need from those states.
I would change 2 things:
Make the inputs controlled, so that you have better and direct control of the input. Accessing the inputs with document.getElementById is bad practice. Save the text of each input within the state or use refs.
I would change the check for valid input into something like this:
const errors = {};
errors.email = "Kindly enter your email id"
if (Object.keys(errors).length === 0) {...}
It should be a new object, so that you don't mutate the state and this makes it easier because you don't have a second variable.
I hope this helps. Happy coding.
Developing a validation function in React. I fairly new and don't want to develop any bad habits while I'm learning so I'm looking for suggestions on how to clean up a block of code i have here.
The function checks input fields and if they're blank, it attaches the appropriate message to an array. Once all input fields are checked, if that array is empty then proceed to submitting form. If that array contains error messages then the message is displayed to screen (not shown)
validation = (event) => {
event.preventDefault();
let errors = []
const {firstName, lastName, emailAddress, password, confirmPassword} = {...this.state}
if(firstName.length === 0) errors.push('Please provide a value for First Name');
if(lastName.length === 0) errors.push('Please provide a value for Last Name');
if(password.length === 0){
errors.push('Please provide a value for Password');
}else if(password !== confirmPassword){
errors.push('Passwords do not match');
};
if(emailAddress.length === 0) {
errors.push('Please provide a value for Email Address');
}else if(!emailRegex.test(emailAddress)){
errors.push('Invalid email address');
};
this.setState({errors: errors})
if(errors.length === 0) this.logIn()
}
logIn = () => {
console.log('good to go')
};
Just looking for ways to clean up my conditional statements, if possible! Thanks
Perhaps something like the below would suffice. You could simplify this greatly if you provided a generic error message such as "Missing required value: <keyName>", as opposed to something specific for the field.
You'll also want to do a manual check to ensure password === confirmPassword, but I think you'll be able to work that piece out.
const emailRegex = <your regex>;
const hasLength = val => val && val.length !== 0;
Validation Map
const validators = {
firstName: {
validate: hasLength,
message: 'Please provide a value for First Name'
},
lastName: {
validate: hasLength,
message: 'Please provide a value for Last Name'
},
password: {
validate: hasLength,
message: 'Please provide a value for Password'
},
emailAddress: [{
validate: hasLength,
message: 'Please provide a value for Email Address'
},
{
validate: val => !emailRegex.test(val),
message: 'Invalid email address'
}
],
}
Validator
validation = (event) => {
event.preventDefault();
let errors = []
const state = {...this.state};
Object
.keys(state)
.forEach(key => {
let validator = validators[key];
if (!validator) return;
if (!Array.isArray(validator)) {
validator = [validator]
}
validator.forEach(v => {
if (!v.validate(state[key])) {
errors.push(v.message)
}
})
});
this.setState({errors: errors})
if (errors.length === 0) this.logIn()
}
I have a two phone fields on my form - phone and phone2. Only one of them is required. I have been unable to get the validation to work no matter what I have tried. I have tried callbacks and custom validators and it seems like I just can't get it to work. The way I would like it to work is check each field and if both are empty then display a custom message under each. If either one, or both, has data then go ahead and validate each for correctness. If/when the user clicks submit again, check both fields again and if either or both has status message, remove the message start validation on both all over again. I just cant' seem to get this to work and I don't know if it is as easy as somehow forcing the plugin to revalidate all (or custom selected) fields every time the submit button is hit or what.
Hopefully this makes sense. If not please ask for more detail. I've been struggling with this for a while now and have cotton head.
Basically, one of the two fields needs to have data and that data needs to be valid.
I've seen the post on stackoverflow here: Conditional validation with BootstrapValidator but it looks like the answer was for a different plugin.
Here is what I have been trying:
.bootstrapValidator({
live: 'disabled',
message: 'This value is not valid',
fields: {
phone: {
group: '.col-md-3',
validators: {
callback: {
callback: function(value, validator, $field) {
field_name = $($field).attr('name');
if (value.length == 0 && $('#phone2').val() == '') {
return {
valid: false,
message: 'at least one phone number is required'
}
}
else
{
if ( $('#phone2') == '' )
{
$('#defaultForm')
.bootstrapValidator('resetField', $('#phone2') )
//.bootstrapValidator('updateStatus', $('#phone2'), 'NOT_VALIDATED')
;
}
}
value = value.replace(/\D/g, '');
if ( value != '' ) {
if ( !((/^(?:(1\-?)|(\+1 ?))?\(?(\d{3})[\)\-\.]?(\d{3})[\-\.]?(\d{4})$/).test(value) && (value.length == 10)) ) {
//alert("PHONE DID NOT PASS VALIDATION");
return {
valid: false,
message: 'Phone number is not valid'
}
}
else
{
return true;
}
}
else
{
$('#defaultForm')
.bootstrapValidator('resetField', field_name )
.bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED')
;
return true;
}
}
}
}
},
phone2: {
group: '.col-md-3',
validators: {
callback: {
callback: function(value, validator, $field) {
field_name = $($field).attr('name');
if (value.length == 0 && $('#phone').val() == '') {
return {
valid: false,
message: 'at least one phone number is required'
}
}
else
{
if ( $('#phone') == '' )
{
$('#defaultForm')
.bootstrapValidator('resetField', $('#phone') )
//.bootstrapValidator('updateStatus', $('#phone'), 'NOT_VALIDATED')
;
}
}
value = value.replace(/\D/g, '');
if ( value != '' ) {
if ( !((/^(?:(1\-?)|(\+1 ?))?\(?(\d{3})[\)\-\.]?(\d{3})[\-\.]?(\d{4})$/).test(value) && (value.length == 10)) ) {
//alert("PHONE2 DID NOT PASS VALIDATION");
return {
valid: false,
message: 'Phone number2 is not valid'
}
}
else
{
return true;
}
}
else
{
$('#defaultForm')
.bootstrapValidator('resetField', field_name )
.bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED')
;
return true;
}
}
}
}
}
}
})
A little late but...
You have to validate both phone values in both callback functions. When one of the phones is valid, set the other as valid.
fields: {
phone: {
validators: {
callback: {
callback: function (value: any, validator: any, field: any) {
// Get the value of the field 'phone2'
const phone2 = validator.getFieldElements('phone2').val();
// Neither phone and phone2 are valid?
if (!value && !phone2) {
return false;
}
// phone is valid. Update validity of phone2.
validator.updateStatus('phone2', validator.STATUS_VALID);
return true;
},
message: 'at least one phone number is required'
}
}
},
phone2: {
validators: {
callback: {
callback: function (value: any, validator: any, field: any) {
// Get the value of the field 'phone'
const phone = validator.getFieldElements('phone').val();
// Neither phone2 and phone are valid?
if (!value && !phone) {
return false;
}
// phone2 is valid. Update validity of phone.
validator.updateStatus('phone', validator.STATUS_VALID);
return true;
},
message: 'at least one phone number is required'
}
}
}
}
I'm learning backbone.js and trying to figure out how to use the validation method. But my problem is when I call for validation the validation is triggered but it still saves the invalid data. As seen here player.set('firstName', '', { validate: true }); I set lastName variable to '' and it saves that values, and it shouldn't.
Edit - Updated code so now it works correctly
Backbone model.
var Player = Backbone.Model.extend({
defaults: {
firstName: "Not specified",
lastName: "Not specified",
position: "Not specified"
},
validate: function (attributes) {
// validate first name
if (!attributes.firstName || attributes.firstName === '') {
return 'you must have a first name';
}
// validate last name
if (!attributes.lastName || attributes.lastName === '') {
return 'you must provide a last name.';
}
// validate position
if (!attributes.position || attributes.position === '') {
return 'you must provide a position.';
}
},
initialize: function () {
// checks when firstName has changed
this.on('change:firstName', function () {
console.log("firstName attribute has changed.");
});
// checks when lastName has changed
this.on('change:lastName', function () {
console.log("lastName attribute has changed.");
});
// checks when position has changed
this.on('change:position', function () {
console.log("position attribute has changed.");
});
// check for valid inputs
this.on('error', function (model, error) {
console.log(error);
});
}
});
From within chrome dev tools I do the following code.
var player = new Player;
player.set({ firstName: "peter", lastName: "andrews", position: "outfield" }, { validate: true });
player.toJSON();
firstName attribute has changed. app.js:32
lastName attribute has changed. app.js:36
position attribute has changed. app.js:40
Object {firstName: "peter", lastName: "andrews", position: "outfield"}
player.set('firstName', '', { validate: true });
player.toJSON();
you must have a first name app.js:14
Object {firstName: "peter", lastName: "andrews", position: "outfield"}
From the Backbone docs:
If the attributes are valid, don't return anything from validate; if
they are invalid, return an error of your choosing.
Your validation function is printing the error strings with console.log but not returning anything.
Try changing your validate function to something like:
validate: function (attributes) {
// validate first name
if (!attributes.firstName || attributes.firstName === '') {
return 'you must have a first name';
}
// validate last name
if (!attributes.lastName || attributes.lastName === '') {
return 'you must provide a last name.';
}
// validate position
if (!attributes.position || attributes.position === '') {
return 'you must provide a position.';
}
},