semantic-ui-react-form-validator v1.0.2

semantic-ui-react-form-validator

A semantic-ui implementation of react-form-validator-core

Install

npm install --save semantic-ui-react-form-validator

Index

• Input
• Dropdown
• TextArea
• Validation Rules
• Add Custom Validation

Input

First Lets look at the simple input field validation. Note: You can use the inline props to get the inline label.

Usage

import React, { Component } from 'react'
import 'semantic-ui-css/semantic.css'; //Import the css only once in your project
import {Form,Input} from 'semantic-ui-react-form-validator'
import {Button} from 'semantic-ui-react';
class App extends Component {
  render () {
    return (
      <Form 
      ref="form"
      onSubmit={this.onSubmit} 
      >
        <Input 
          type="text"
          label="Test Input"
          onChange={(e)=>{this.setState({value:e.target.value})}} 
          value={this.state.value} 
          validators={['required']} 
          errorMessages={['this field is required']} 
          width={6} 
          />
          
        <Button color="teal">Submit<Button>
      </From>
    )
  }
}

Result

Here is a list of all props you can use in the Input Component.

Dropdown

Dropdown Component is pretty similar to the Input Component.

Usage

import React, { Component } from 'react'
import 'semantic-ui-css/semantic.css'; //Import the css only once in your project
import {Form,Dropdown} from 'semantic-ui-react-form-validator'
import {Button} from 'semantic-ui-react';
class App extends Component {
  render () {
  const options=[
      {
        key: 'Jenny Hess',
        text: 'Jenny Hess',
        value: 'Jenny Hess',
        image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
      },
      {
        key: 'Elliot Fu',
        text: 'Elliot Fu',
        value: 'Elliot Fu',
        image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },
      },
      {
        key: 'Stevie Feliciano',
        text: 'Stevie Feliciano',
        value: 'Stevie Feliciano',
        image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },
      },
      {
        key: 'Christian',
        text: 'Christian',
        value: 'Christian',
        image: { avatar: true, src: '/images/avatar/small/christian.jpg' },
      },
      {
        key: 'Matt',
        text: 'Matt',
        value: 'Matt',
        image: { avatar: true, src: '/images/avatar/small/matt.jpg' },
      },
      {
        key: 'Justen Kitsune',
        text: 'Justen Kitsune',
        value: 'Justen Kitsune',
        image: { avatar: true, src: '/images/avatar/small/justen.jpg' },
      },
    ];
    return (
      <Form 
      ref="form"
      onSubmit={this.onSubmit} 
      >
        <Dropdown
          label="Test Dropdown"
          onChange={(e,{value})=>{this.setState({dropdown:value})}} 
          value={this.state.dropdown} 
          validators={['required']} 
          errorMessages={['this field is required']} 
          validators={['required']}
          errorMessages={['You must select one option']}
          options={options}
          />
          
        <Button color="teal">Submit<Button>
      </From>
    )
  }
}

Result

Here is a list of all props you can use in the Dropdown Component.

TextArea

Usage

import React, { Component } from 'react'
import 'semantic-ui-css/semantic.css'; //Import the css only once in your project
import {Form,TextArea} from 'semantic-ui-react-form-validator'
import {Button} from 'semantic-ui-react';
class App extends Component {
  render () {
    return (
      <Form 
      ref="form"
      onSubmit={this.onSubmit} 
      >
        <TextArea
          label="TEXTAREA LABEL"
          validators={['required']}
          errorMessages={['CAnnot Be empty']}
          value={this.state.txtValue}
          onChange={e=>{this.setState({txtValue:e.target.value})}}
          />
          
        <Button color="teal">Submit<Button>
      </From>
    )
  }
}

Here is a list of all props you can use in the Dropdown Component.

Validation Rules

Simple form validation component for react forms inspired by formsy-react

Default validation rules:

• matchRegexp
• isEmail
• isEmpty
• required
• trim
• isNumber
• isFloat
• isPositive
• minNumber
• maxNumber
• minFloat
• maxFloat
• minStringLength
• maxStringLength
• isString
• maxFileSize
• allowedExtensions

Some rules can accept extra parameter, example:

<Input
   {...someProps}
   validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}
/>

Add Custom Validation

You can add your own rules

componentDidMount(){
    Form.addValidationRule('isFoo',value=>{
      var foo=/foo/;
      return foo.test(value)
    })
  }

check out app.js in example folder for more examples

Form

• Props

License

MIT © Aman9804