v0.1.1 - for changes see CHANGELOG.md

Author: Dominik Sumer

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.1.1 (November 21, 2017)
+- added possibility to add props to form element via [formProps](https://github.com/cat-react/form/blob/master/docs/api.md#formprops) prop
+- the validation rule `isRequired` now checks for `undefined`, `null` or an empty string. everything else is valid
+
 ### 0.1.0 (October 3, 2017)
 - first official release!
 - added api documentation

docs/api.md

@@ -10,6 +10,8 @@ Welcome to the `@cat-react/form` API documentation.
     - [onValidChanged](#onvalidchangedvalid-values-isvalidating)
     - [onValid](#onvalidvalues)
     - [onInvalid](#oninvalidvalues-isvalidating)
+    - [className](#classname)
+    - [formProps](#formprops)
 - [Input](#input) (HOC for building input fields)
     - Retrieves
         - [value](#value)
@@ -290,6 +292,38 @@ render() {
 ```
 ---
 
+### className
+CSS ClassName which will be passed directly to the <form> html element.
+
+For example:
+```jsx
+<Form className="test" />
+```
+
+will result in:
+
+```jsx
+<form class="test" />
+```
+
+---
+
+### formProps
+Props which will be passed directly to the <form> html element.
+
+For example:
+```jsx
+<Form formProps={{autocomplete: 'off'}} />
+```
+
+will result in:
+
+```jsx
+<form autocomplete="off" />
+```
+
+---
+
 ## Input
 Higher-Order Component for building input fields.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cat-react/form",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "A simple yet powerful library which helps creating validated forms in react.",
     "main": "index.umd.min.js",
     "jsnext:main": "index.es.js",

src/Form.js

@@ -205,14 +205,10 @@ export default class Form extends React.Component {
     }
 
     render() {
-        const {children, className} = this.props;
-
-        const formProps = {
-            className
-        };
+        const {children, className, formProps} = this.props;
 
         return (
-            <form {...formProps} onSubmit={this.onSubmit}>
+            <form className={className} {...formProps} onSubmit={this.onSubmit}>
                 {children}
             </form>
         );

src/validationRules.js

@@ -3,7 +3,8 @@ const rules = {
         return regexp.test(value);
     },
     isRequired: (values, value) => {
-        return !!value;
+        const isEmpty = (typeof value === 'undefined' || value === null || value === '');
+        return !isEmpty;
     },
     isEmail: function (values, value) {
         return rules.matchRegexp(values, value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i);
@@ -31,11 +32,11 @@ const rules = {
     },
     isNumber: (values, value) => {
         switch (typeof value) {
-            case 'string': 
+            case 'string':
                 return rules.matchRegexp(values, value, /^-?\d+\.?\d*$/);
-            case 'number': 
+            case 'number':
                 return true;
-            default: 
+            default:
                 return false;
         }
     }

tests/Form.spec.js

@@ -35,9 +35,20 @@ class SpecialForm extends React.Component {
 
 describe('Form', () => {
     it('should render correctly', () => {
-        let wrapper = shallow(<Form className="myForm"><span className="abc">abc</span></Form>);
+        const onInvalid = jest.fn();
+        let wrapper = shallow(<Form className="myForm" onInvalid={onInvalid}><span className="abc">abc</span></Form>);
+        wrapper.instance().validate();
         expect(wrapper.contains(<span className="abc">abc</span>)).toBe(true);
         expect(wrapper.is('.myForm')).toBe(true);
+        expect(onInvalid).not.toHaveBeenCalled();
+    });
+
+    it('should pass all props', () => {
+        let wrapper = shallow(<Form className="myForm" formProps={{autocomplete: 'off', fantasy: true}}><span className="abc">abc</span></Form>);
+        const props = wrapper.props();
+        expect(props.autocomplete).toBe('off');
+        expect(props.className).toBe('myForm');
+        expect(props.fantasy).toBe(true);
     });
 
     it('should add the vaidationRule', () => {
@@ -58,12 +69,14 @@ describe('Form', () => {
         const onSubmit = jest.fn();
         const onValidSubmit = jest.fn();
         const onInvalidSubmit = jest.fn();
+        const onValidChanged = jest.fn();
         const onValid = jest.fn();
         const onInvalid = jest.fn();
         let wrapper = mount(<Form className="myForm"
                                   onSubmit={onSubmit}
                                   onValidSubmit={onValidSubmit}
                                   onInvalidSubmit={onInvalidSubmit}
+                                  onValidChanged={onValidChanged}
                                   onValid={onValid}
                                   onInvalid={onInvalid}>
             <button type="submit"/>
@@ -78,6 +91,9 @@ describe('Form', () => {
         expect(onInvalid).toHaveBeenCalledWith({}, false);
         expect(onValid).toHaveBeenCalledTimes(1);
         expect(onValid).toHaveBeenCalledWith({});
+        expect(onValidChanged.mock.calls.length).toBe(2);
+        expect(onValidChanged.mock.calls[0]).toEqual([false, {}, false]);
+        expect(onValidChanged.mock.calls[1]).toEqual([true, {}, false]);
     });
 
     it('should submit without triggering the events', () => {

tests/Input.spec.js

@@ -49,6 +49,9 @@ describe('Input', () => {
         wrapper.instance().touch();
         wrapper.update();
         expect(instance.isPristine()).toBe(false);
+        wrapper.instance().touch();
+        wrapper.update();
+        expect(instance.isPristine()).toBe(false);
     });
 
     it('should change the value correctly', (done) => {

tests/validationRules.spec.js

@@ -3,7 +3,19 @@ import rules from '../src/validationRules';
 describe('Validation Rules', () => {
     describe('isRequired', () => {
         it('should successfully validate the value', () => {
-            const valid = rules.isRequired(null, 'abc');
+            let valid = rules.isRequired(null, 'abc');
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, true);
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, false);
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, 0);
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, '0');
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, {});
+            expect(valid).toBe(true);
+            valid = rules.isRequired(null, []);
             expect(valid).toBe(true);
         });
         it('should invalidate the value', () => {