Js-textfield-validation NPM

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>
    );
  };
};