Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ffxsam/meteor-react-smartform

Smart form elements for Meteor React
https://github.com/ffxsam/meteor-react-smartform

Last synced: about 1 month ago
JSON representation

Smart form elements for Meteor React

Awesome Lists containing this project

README 

        
# Meteor/React Smart Form



SmartForm is a package for Meteor/React that allows simple and easy form validation and error handling.



***NOTE: This package is currently pre-1.0 and should be considered not production-ready***



## Installation



    $ meteor add ffxsam:react-smartform



## Example Usage



```jsx

render() {

  return 


    

      

      

      

      

      

    

  


}

```



The `SmartForm.Input` component will take care of any validation and, in case of errors, it will display your `invalidMsg` or `requiredMsg` depending on which error occurred. `SmartForm.Error` is a separate component so that it can be placed anywhere independently of its corresponding `SmartForm.Input`. Standard props you'd expect to be able to use such as `className` can be used on any of these components.



## Reference



### SmartForm.Form



#### Properties

* `id`: {String} **[required]** The id of the form

* `onSubmit`: {Function} **[required]** Function to call when user clicks the submit button. The callback will be called with two arguments:

	* `error`: {Object} Either `undefined` or an object of type `Meteor.Error` in the case of any form fields being invalid.

	* `formData`: {Object}  An object containing all of the input element IDs, with the following properties:

		* `errorReason`: {Symbol} Error code for this field. Either `SmartForm.ERROR_NONE`, `SmartForm.ERROR_REQUIRED`, `SmartForm.ERROR_INVALID`, or `SmartForm.ERROR_SUSPECT` (more on this one below).

		* `valid`: {Boolean} Indicates if the field is in a valid state.

		* `value`: {String} The current value of the input field.



### SmartForm.Input



#### Properties

* `formId`: {String} **[required]** The id of the form this input should be linked to

* `id`: {String} **[required]** The id of the input element

* `required`: {Boolean} Indicates whether this field is required

* `validateAs`: {RegEx/String} If you wish for this field to provide validation, you can either pass your own RegEx, or a string specifying the type of value being passed in. Currently accepted strings for `validateAs` are:

	* `"email"`

	* `"phone"` (US 10-digit phone number)

	* `"zip"` (US 5-digit ZIP)

* `weakValidation`: {Boolean} If this property is present, the field will only perform a weak validation. In other words, if the value in the field does not pass validation against the `validateAs` field, the `SmartForm.Error` component will still show its `invalidMsg` message, but the field will remain in a valid state, and `SmartForm.ERROR_SUSPECT` will be set as the field error instead of `SmartForm.ERROR_INVALID`. Weak validation is recommended for fields such as email address, where standards might change in the future (e.g. we didn't used to have domain suffixes greater than three characters!)

* `defaultValue`: {String} A default value for the input field



### SmartForm.Checkbox



#### Properties

* `formId`: {String} **[required]** The id of the form this input should be linked to

* `id`: {String} **[required]** The id of the input element

* `defaultChecked`: {Boolean} Indicates whether the checkbox should be checked by default



### SmartForm.Select



#### Properties

* `formId`: {String} **[required]** The id of the form this input should be linked to

* `id`: {String} **[required]** The id of the input element

* `required`: {Boolean} Indicates whether this field is required



### SmartForm.Error



#### Properties

* `invalidMsg`: {String} The message to display when the field is invalid or suspect

* `requiredMsg`: {String} The message to display when the field is required but empty

* `linkedTo`: {String} **[required]** The form element the error should be linked to, in the format of `"form-id.element-id"`

* `onError`: {Function} A callback which is invoked in case of error, and is passed two arguments:

	* `errorReason`: {Symbol} The reason for the error. Either `SmartForm.ERROR_INVALID`, `SmartForm.ERROR_SUSPECT`, or `SmartForm.ERROR_REQUIRED`

	* `value`: {String} The value of the field



## Future Plans (contributions welcome!)

* The ability to fire a callback as soon as the user tabs out of a field (e.g. to check if a username is available)

* More input types (select, textarea, etc)