0.0.1 • Published 3 years ago

reprehendo v0.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Reprehendo

Library for form validation

Example

HTML

  <form>
    <!-- Registering the key firstName -->
    <input type="text" data-reprehendo="firstName" placeholder="First name">
    <!-- Registering the key lastName -->
    <input type="text" data-reprehendo="lastName" placeholder="Last name">
    <!-- Registering the key password -->
    <input type="password" data-reprehendo="password" placeholder="password">
    <button type="submit">Submit</button>
  </form>

JS

import Reprehendo from 'reprehendo';

new Reprehendo({
  firstName: {
    type: 'input',
    invalidClass: 'invalid', 
    validClass: 'valid',
    required: true,
    bigFirstSymbol: true
  },
  lastName: {
    type: 'input',
    invalidClass: 'invalid',
    validClass: 'valid',
    required: true,
    bigFirstSymbol: true
  },
  password: {
    type: 'password',
    required: true,
    contentPassword: ['*', '$'],
    validClass: 'valid',
    invalidClass: ['invalid', 'invalid_2'],
    minLength: 3,
    maxLength: 30
  }
}).init();

Thus

  • Use the data-reprehendo attribute to register keys
  • Pass the options you need for validation to these objects

Note

You will have access to some options that are suitable for certain types. For example, the "contentPassword" option will be available for the password, but not for other types.

List of types for elements

TypeValueExample
inputThe most basic typetype: 'input'
passwordSuitable for passwordtype: 'password'
emailSuitable for emailtype: 'email'
numberSuitable for numbertype: 'number'
repeatPasswordSuitable for repeat passwordtype: 'repeatPassword'
checkboxSuitable for checkbox (adopting)type: 'checkbox'
selectSuitable for "select" tagtype: 'select'

List of options

OptionTypeValueWhat type is it suitable forExample
requiredBooleanMandatory input fieldallrequired: true
patternRegexpAccepts a regular expression that tests the element along with other optionsphone, input, passwordpattern: /[a-z]*/
chooseOptionObjectWhat should be the value of selectselectchooseOption: ['Russia', 'USA']
minLengthNumberMinimum number of charactersinput, password, numberminLength: 3
maxLengthNumberMaximum number of charactersinput, password, numbermaxLength: 3
bigFirstSymbolBooleanStarts with a large first characterinputbigFirstSymbol: true
contentPasswordObjectWhat characters the password should containpasswordcontentPassword: ['*', '!']
classValidString or ObjectContent is added when the element is validallclassValid: 'valid' or classValid: ['valid', 'valid_2']
classInvalidString or ObjectContent is added when the element is invalidallclassInvalid: 'valid' or classInvalid: ['invalid', 'invalid_2']
noSpaceBooleanDoesn't allow spacesinput, password, numbernoSpace: true
giveDataObjectFunction for accepting data. Fires when all elements are validglobal object{ giveData(data) {...}, password: { type: 'password' ... } }
repeatAtStringAccepts a key for which the password will be repeatedrepeatPasswordrepeatAt: 'password'
viewStringDefines the appearance of the stringnumberview: 'default' or 'card' or 'date'

Examples of some options

chooseOption

HTML
  <form>
    <select data-reprehendo="country" name="country">
      <option value="Select your country">Select your country</option>
      <option value="Russia">Russia</option>
      <option value="USA">USA</option>
    </select>
    <button type="submit">Submit</button>
  </form>
JS
import Reprehendo from 'reprehendo';

new Reprehendo({
  country: {
    type: 'select',
    required: true,
    invalidClass: 'invalid',
    validClass: 'valid',
    chooseOption: ['Russia', 'USA']
  }
}).init();

pattern

HTML
  <form>
    <input type="text" data-reprehendo="password" />
    <button type="submit">Submit</button>
  </form>
JS
import Reprehendo from 'reprehendo';

new Reprehendo({
  password: {
    type: 'password',
    required: true,
    minLength: 6,
    // See here
    pattern: /\d+/ // Only numbers
  }
}).init();

giveData

HTML
  <form>
    <input type="text" data-reprehendo="firstName" placeholder="First name">
    <input type="text" data-reprehendo="lastName" placeholder="Last name">
    <button type="submit">Submit</button>
  </form>
JS
import Reprehendo from 'reprehendo';

new Reprehendo({
  firstName: {
    type: 'input',
    invalidClass: 'invalid',
    validClass: 'valid',
    required: true,
    minLength: 3,
    bigFirstSymbol: true,
    noSpace: true
  },
  lastName: {
    type: 'input',
    invalidClass: 'invalid',
    validClass: ['valid', 'valid_2'],
    minLength: 3,
    required: true,
    bigFirstSymbol: true,
    noSpace: true
  },
  // See here
  giveData(data) {
    console.log(data); // { lastName: element values, firstName: element values }
  },
}).init();

view

HTML
  <form>
    <input type="text" data-reprehendo="number" placeholder="Number">
    <button type="submit">Submit</button>
  </form>
JS
import Reprehendo from 'reprehendo';

new Reprehendo({
  number: {
    type: 'number',
    validClass: 'valid',
    invalidClass: 'invalid',
    // See here
    view: 'date' // 10/10/2021,
    view: 'default' // 123456... only numbers,
    view: 'card' // 0000 0000 0000 0000 - view credit card
  }
}).init();
formvalidationreprehendo
0.0.1

3 years ago