js-textfield-validation

Textfield Validation

An npm Package to validate textfield value.

How to install

# with npm
npm install js-textfield-validation

API

There are chainable and non-chainable methods.

Available chainable validations

Methods	Description
alphanumericOnly()	To accept alphanumeric only.
dollarValue()	To create a value with two decimal places.
ipAddress()	To accept number and dot only.
noSpace()	To remove all the spaces.
numOnly()	To remove all the non integer.
removeNum()	To remove all the number.
removeLeadingZero()	To remove all the leading zero.
singleSpace()	To accept single space between two characters only.
truncate(length: integer)	To truncate the value to a specifc length.
wordOnly()	To remove all non alphabet.

Available non-chainable validations

Methods	Description	Output	Remark
validateAlphanumericOnly(value: string)	To check whether the value contains alphanumberic only.	boolean	nil
validateEmail(email: string)	To check whether value is a valid email format.	boolean	nil
validateNRIC(nric: string)	To check whether value is an valid NRIC in Singapore.	boolean	Source
validateIPAddress(address: string)	To check whether value is a valid IP address.	boolean	nil

HOW TO USE

Include chainable methods

import Validation from "js-textfield-validation";

Include non-chainable methods

import { validateEmail, validateIPAddress, validateNRIC } from "js-textfield-validation";

An example with ReactJS, material-ui and chainable methods

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import Validation from "js-textfield-validation";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      error: "",
    };
  };

  handleChange = event => {
    let validatedName = new Validations(event.target.value).removeNum().singleSpace();
    if (validatedName.error !== "") {
      this.setState({ name: validatedName.value, error: validatedName.error });
    } else {
      this.setState({ name: validatedName, error: "" });
    }
  };

  render() {
    return (
      <div>
        <TextField
          id="name"
          label"Name"
          variant="outlined"
          placeholder="Enter your name here."
          value={ this.state.name }
          onChange={ this.handleChange }
          helperText={ this.state.error }
        />
      </div>
    );
  };
};

An example with ReactJS, material-ui and chainable and non-chainable methods

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import Validation, { validateEmail } from "js-textfield-validation";

class App extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
      errorMessage: ""
    };
  };

  handleChange = event => {
    let newEmail = new Validation(event.target.value).noSpace().value;
    const isValidEmail = validateEmail(newEmail);
    if (isValidEmail) {
      this.setState({ email: newEmail, errorMessage: "" })
    } else {
      this.setState({ email: newEmail, errorMessage: "Invalid email" })
    }
  };

  render() {
    return (
      <div>
        <TextField
          id="email"
          label"Email"
          variant="outlined"
          placeholder="Enter your email here."
          value={ this.state.email }
          onChange={ this.handleChange }
        />
        <div>{ this.state.errorMessage }</div>
      </div>
    );
  };
};

LICENSE

LICENSE.md