Skip to content
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

Jump to bottom

Added possibility to passing validation parameters to validation errors messages #289

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added possibility to passing validation parameters to validation errors messages #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions API.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,11 +271,13 @@ The message that will show when the form input component is invalid. It will be
name="email"
validations={{
isEmail: true,
maxLength: 50
maxLength: 50,
someCustomValidation: [1, 2, 3]
}}
validationErrors={{
isEmail: 'You have to type valid email',
maxLength: 'You can not type in more than 50 characters'
maxLength: 'You can not type in more than {0} characters',
someCustomValidation: '{0} + {1} = {2}'
}}
/>
```
Expand Down
12 changes: 11 additions & 1 deletion examples/dynamic-form-fields/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@ import MySelect from './../components/Select';
import MyRadioGroup from './../components/RadioGroup';
import MyMultiCheckboxSet from './../components/MultiCheckboxSet';

const validationErrors = {
'isEmail': 'The field must contain a valid email address',
'isNumeric': 'The field must contain only numbers',
'isAlphanumeric': 'The field must only contain alpha-numeric characters',
'equals': 'The field must be equal to {0}',
'minLength': 'The field must be at least {0} characters in length',
'maxLength': 'The field must not exceed {0} characters in length'
};

const Fields = props => {
function onRemove(pos) {
return event => {
Expand All @@ -27,6 +36,7 @@ const Fields = props => {
title={field.validations ? JSON.stringify(field.validations) : 'No validations'}
required={field.required}
validations={field.validations}
validationErrors={validationErrors}
/>
) :
(
Expand All @@ -35,6 +45,7 @@ const Fields = props => {
title={field.validations ? JSON.stringify(field.validations) : 'No validations'}
required={field.required}
validations={field.validations}
validationErrors={validationErrors}
options={[
{title: '123', value: '123'},
{title: 'some long text', value: 'some long text'},
Expand Down Expand Up @@ -86,7 +97,6 @@ const App = React.createClass({
cmp={(a, b) => JSON.stringify(a) === JSON.stringify(b)}
items={[
{isEmail: true},
{isEmptyString: true},
{isNumeric: true},
{isAlphanumeric: true},
{equals: 5},
Expand Down
18 changes: 12 additions & 6 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ Formsy.Form = React.createClass({

// the component defines an explicit validate function
if (typeof component.validate === "function") {
validationResults.failed = component.validate() ? [] : ['failed'];
validationResults.failed = component.validate() ? [] : [{ method: 'failed' }];
}

var isRequired = Object.keys(component._requiredValidations).length ? !!requiredResults.success.length : false;
Expand Down Expand Up @@ -285,7 +285,13 @@ Formsy.Form = React.createClass({

if (validationResults.failed.length) {
return validationResults.failed.map(function(failed) {
return validationErrors[failed] ? validationErrors[failed] : validationError;
var errorMessage = validationErrors[failed.method] ? validationErrors[failed.method] : validationError;

failed.args && [].concat(failed.args).forEach((arg, i) => {
errorMessage = errorMessage.replace(new RegExp('\\{' + i + '\\}', 'g'), arg);
});

return errorMessage;
}).filter(function(x, pos, arr) {
// Remove duplicates
return arr.indexOf(x) === pos;
Expand Down Expand Up @@ -319,19 +325,19 @@ Formsy.Form = React.createClass({
var validation = validations[validationMethod](currentValues, value);
if (typeof validation === 'string') {
results.errors.push(validation);
results.failed.push(validationMethod);
results.failed.push({ method: validationMethod });
} else if (!validation) {
results.failed.push(validationMethod);
results.failed.push({ method: validationMethod });
}
return;

} else if (typeof validations[validationMethod] !== 'function') {
var validation = validationRules[validationMethod](currentValues, value, validations[validationMethod]);
if (typeof validation === 'string') {
results.errors.push(validation);
results.failed.push(validationMethod);
results.failed.push({ method: validationMethod, args: validations[validationMethod] });
} else if (!validation) {
results.failed.push(validationMethod);
results.failed.push({ method: validationMethod, args: validations[validationMethod] });
} else {
results.success.push(validationMethod);
}
Expand Down
33 changes: 33 additions & 0 deletions tests/Element-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,39 @@ export default {

},

'should validation parameters passed to validation errors messages': function (test) {

const TestForm = React.createClass({
render() {
return (
<Formsy.Form>
<TestInput name="A"
validations={{
'minLength': 3,
'maxLength': 5
}}
validationErrors={{
'minLength': 'The field must be at least {0} characters in length',
'maxLength': 'The field must not exceed {0} characters in length'
}}
/>
</Formsy.Form>
);
}
});
const form = TestUtils.renderIntoDocument(<TestForm/>);

const inputComponent = TestUtils.findRenderedComponentWithType(form, TestInput);
const input = TestUtils.findRenderedDOMComponentWithTag(form, 'INPUT');
TestUtils.Simulate.change(input, {target: {value: 'xx'}});
test.equal(inputComponent.getErrorMessage(), 'The field must be at least 3 characters in length');
TestUtils.Simulate.change(input, {target: {value: 'xxxxxx'}});
test.equal(inputComponent.getErrorMessage(), 'The field must not exceed 5 characters in length');

test.done();

},

'should not be valid if it is required and required rule is true': function (test) {

const TestForm = React.createClass({
Expand Down