npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ve-form-validation

v1.0.0

Published

form-validate with javascript

Downloads

3

Readme

VE-Form-Validate

form-validate is a library that allows you to validate inputs and return streams of data that detect the validation.

INSTALATION

npm i ve-form-validate

API

Schema

With Validate Object user can handle all stuff validation Validator | Description ------------ | ------------- |BooleanValidator | Validate.boolean |NumberValidator | Validate.number | |validate number with minLength & maxLength | | Example: Validate.number.minLength(3) |ObjectValidator | Validate.object | |object validator has keys function | |that wrap all validation |StringValidator | Validate.string | |validate string with min & max | | validate any type of string with type method | | color - email - date - text - url - image | | for special pattern you can use pattern method | | Example: Validate.string.type('email') | | Example: Validate.string.pattern(/^([^.]+)/) |ArrayValidator | validate input array with contains method | | Example: Validate.array.contains(Validate.number.minLength(5))

Special Methods

required() is a shared method for all validators

Events

after you handle schema, you can access these events to handle more stuff when user input or on submit event Event | Description ------------ | ------------- onValues | got a stream of form values onMessages | this event will emit success - error messages depend on the validation onSubmit | will send object that contains isValidating - isSubmiting - errors if found - Form Values

Access Events

const formEvents = FormValidate("validate_form_api", Validation);

formEvents.onSubmit(function(submit) {
  console.log(submit, 'onSubmit');
});
formEvents.onValues(function(values) {
  console.log(values, 'onValues');
});
formEvents.onMessages(function(messages) {
  console.log(messages, 'onMessages');
});

USAGE

you will send validation object to FormValidate Method with form className

import { FormValidate, Validate } from 've-form-validate';
const Validation = {
  schema: Validate.object.keys({
    email: Validate.string.type('email'),
    phone: Validate.number.required()
  }),
  messages: {
    email: {
      success: 'email is valid',
      error: 'email not valid'
    },
    phone: {
      error: 'phone number not correct',
      success: 'phone is correct'
    }
  }
};
const formEvents = FormValidate('validate_form_api', Validation);

EXAMPLES

Simple Filed


<input name="phone" placeholder="phone" />
<input name="email" placeholder="email" />

 Validate.object.keys({
     email: Validate.string.type("email"),
     phone: Validate.number.required()
});

Object Field

<fieldset name="person">
  <input type="text" name="firstName" value="ayman" />
  <input type="text" name="lastName" value="shafik" />
  <input type="text" name="age" />
</fieldset>;

Validate.object.keys({
  person: Validate.object.keys({
    firstName: Validate.string,
    lastName: Validate.string,
    age: Validate.number
  })
});

Validate array of boolean/number/string fields

<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>;

Validate.object.keys({
  cars: Validate.array.contains(Validate.string)
});

TODO

  • Localization
  • Validate arr of objects

LICENCE

MIT