RF-Form: Build React Form With Validations Easily


#1

Hi, everyone, I am glad to release and share the new project rf-form for you.
After days of hard works, this new project has many improvements from the previous one. Now it support infinite and circle schema definitions and field structures, and connecting many forms is possible.
welcome to use and report problems. welcome any helps and supports. thanks!

all features

  • build React form with validations easily
  • schema based
  • support recursive structures
  • support circle schema definition
  • support connected forms
  • support manipulations of array of fields
  • support top level and individual controls of readOnly, disabled
  • enable validations of fields automatically
  • support extensions of form components (wrapper, group, array, fields)

Basic Usage

const schema = {
    name: {
        type: 'Text',
        label: 'Name',
        validate(v) {
            if (!v) return 'Name is required.'
        }
    },
    birthday: {
        type: 'Date',
        label: 'Birthday'
    },
    sex: {
        type: 'RadioGroup',
        label: 'Sex',
        options: {
            items: {
                male: 'Male',
                female: 'Female',
                unknown: {label: 'Unknown', disabled: true}
            }
        },
        validate(v) {
            if (!v) return 'Sex is required.'
        }
    },
    friends: {
        label: 'Friends',
        array: {
            type: 'Text',
            label: 'Friend Name'
        },
        validate(v) {
            if (v.length > 3) return 'You have too much friends.'
        }
    },
    account: {
        label: 'Account',
        group: {
            username: {
                type: 'Text',
                label: 'Username',
                validate(v) {if (!v) return 'Username is required.'}
            },
            password: {
                type: 'Password',
                label: 'Password',
                validate(v) {if (!v || v.length < 6) return 'Password length must be >= 6.'}
            },
            confirmPassword: {
                type: 'Password',
                label: 'Confirm Password',
                validate(v, fv /*form value*/) {
                    if (v !== fv.account.password) return 'Password does not match.'
                }
            }
        }
    }
};

class TestPage extends React.Component {
    render() {
        return <Form {...{
            schema: schema,
            onSubmit: (value, summary, detail)=> console.log({value, summary, detail})

            // you can specify value and onChange props to make the form work in controlled mode.
            // value: ...
            // onChange: (value, summary, detail)=> ...
        }}>
            <button className="btn btn-primary">Submit</button>
        </Form>
    }
}

Demo Site

Demo Site

Links


#2

Have you seen https://github.com/vazco/uniforms

@radekmie is the main developer and @zeroasterisk is also a committer (he had his own package but is now working on this one)

So perhaps it would be even better if you contributed to that one and join efforts to create a great package that is also able to reuse existing meteor codebases (simple schema) and best practices.


#3

Issues and pull requests are welcome.


#4

Yes, uniforms is great, but rf-form has its mission: it is not tied to SimpleSchema and Meteor.


#5

Currently, only uniforms dependency in Meteor world is indeed, SimpleSchema, but it wouldn’t be hard to make it Meteor-independent - allow different schema format and custom validation.


#6

That would be great and right way to go. Look forward to your good news!


#7

I’ve just released a components suit for materialize.
rf-materialize


#8

These days many works have been finished. There are improvements and enhancements, and a Demo Site was setup for better learning and reference.


#9

"it is not tied to SimpleSchema and Meteor"
What a gift. Love it.
Thank you!


#10

Out of curiosity, would this package also work with react-native?


#11

Looks great (-:
When do you plan realize material multiselect? (-:


#12

Sorry, I didn’t use and check the react-native requirements. you can have a review of the code or test it on react-native app. If you have any result or thoughts after, please tell us. thanks.


#13

hi. I have tried, but failed. there are some problems with materialize select. it must be initialized with jquery, bad enough. what’s worse, even after initialized, I can’t get onChange event of the select element. If you are interesting, I hope you could implement them and send a PR. Thanks :slight_smile: