react-turkey-validate

Adding quick verification to the forms used in Turkey

Install

npm install --save react-turkey-validate

Usage

Then, you can import and use the validators in your React components:

Basic Validators

import { 
  validateTCKimlik, 
  validateTelefon, 
  validateIBAN, 
  validateVergiNo, 
  validateSicilNo, 
  validateEmail,
  validateWebsite,
  validateDate
} from 'react-turkey-validate';

// TC Kimlik No validation
console.log(validateTCKimlik('12345678901')); // returns true or false

// Phone number validation
console.log(validateTelefon('05301234567')); // returns true or false

// IBAN validation
console.log(validateIBAN('TR330006100519786457841326')); // returns true or false

// Tax number validation
console.log(validateVergiNo('1234567890')); // returns true or false

// Registry number validation
console.log(validateSicilNo('1234567')); // returns true or false

// Email validation
console.log(validateEmail('[email protected]')); // returns true or false

// Website validation
console.log(validateWebsite('www.example.com')); // returns true or false

// Date validation
console.log(validateDate('2023-05-15')); // returns true or false
console.log(validateDate('15.05.2023', 'DD.MM.YYYY')); // returns true or false

Custom Validators

import { 
  createCustomValidator, 
  createLengthValidator,
  createNumberValidator
} from 'react-turkey-validate';

// Custom regex validator
const validatePostalCode = createCustomValidator(/^\d{5}$/);
console.log(validatePostalCode('34100')); // returns true
console.log(validatePostalCode('341')); // returns false

// Length validator
const validateUsername = createLengthValidator(3, 20);
console.log(validateUsername('user123')); // returns true
console.log(validateUsername('a')); // returns false (too short)
console.log(validateUsername('this_username_is_too_long')); // returns false (too long)

// Number validator
const validatePrice = createNumberValidator({ allowDecimal: true, maxDecimalPlaces: 2 });
console.log(validatePrice('123.45')); // returns true
console.log(validatePrice('123.456')); // returns false (too many decimal places)

Usage in React Components

Here's an example of how to use these validators in a React component:

import React, { useState } from 'react';
import { validateEmail, createLengthValidator } from 'react-turkey-validate';

const validateUsername = createLengthValidator(3, 20);

function RegistrationForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [isUsernameValid, setIsUsernameValid] = useState(true);
  const [isEmailValid, setIsEmailValid] = useState(true);

  const handleUsernameChange = (e) => {
    const value = e.target.value;
    setUsername(value);
    setIsUsernameValid(validateUsername(value));
  };

  const handleEmailChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    setIsEmailValid(validateEmail(value));
  };

  return (
    <form>
      <div>
        <input
          type="text"
          value={username}
          onChange={handleUsernameChange}
          placeholder="Username (3-20 characters)"
        />
        {!isUsernameValid && <p>Invalid username</p>}
      </div>
      <div>
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          placeholder="Email"
        />
        {!isEmailValid && <p>Invalid email</p>}
      </div>
    </form>
  );
}

export default RegistrationForm;

This example demonstrates how to use both pre-defined validators (like validateEmail) and custom validators created with createLengthValidator in a React form.

License

MIT © ffatih-safak