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

js-valid

v1.1.0

Published

Powerful validation library for JavaScript

Downloads

3

Readme

Install

$ npm install js-valid
or
$ git clone https://github.com/donvercety/js-valid.git

Then add a <script> to your index.html

npm
<script src="./node_modules/js-valid/validate.js"></script>
git clone
<script src="./js-valid/validate.js"></script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-valid</title>
</head>
<body>
    <form action="" id="test-form">
        <input type="text" name="name" id="name" placeholder="username"/>
        <input type="password" name="pass" id="pass" placeholder="pasword"/>
        <input type="password" name="pass_match" id="pass_match" placeholder="repeat password"/>
        <input type="text" name="email" id="email" placeholder="email"/>
        <input type="submit" value="send" />
    </form>
    
    <script src="./js-valid/validate.js"></script>
    <script type="text/javascript">
        var v, form; 
    
        v = new MY.Validate();
        
        form = document.getElementById('test-form');
        form.addEventListener("submit", function(e) {
            e.preventDefault();
            
            // get all fields from the form using the form id or the already selected object
            var data = v.getFormFields(form);
            
            // user validation
            v.validate(data.name, 'user');
            v.required().minLength(4).noWhitespace();
            
            // pass validation, even better single line
            v.validate(data.pass, 'pass').required().minLength(8).noWhitespace();
            
            // pass match validation
            v.validate(data.pass_match, 'pass_match').matches(data.pass);
            
            // email validation
            v.validate(data.email).required().isEmail();
            
            // check all validation rules
            if(v.isValid()) { 
                console.log('Validation successful!');
            } else {
                // display errors, 'getErrors()' returns an array containing all errors that occurred
                var err = v.getErrors();
                for(var i = 0, len = err.length; i < len; i++) {
                    console.warn('Error: ' + err[i]);
                }
            }
        });
    </script>
</body>
</html>

Available validation methods

  • min(val)
  • max(val)
  • exact(val)
  • maxLength(val)
  • minLength(val)
  • exactLength(val)
  • required()
  • matches(val)
  • isAlpha()
  • isNumeric()
  • isAlphaNumeric()
  • isAlphaDash()
  • isInteger()
  • isHex()
  • isBase64()
  • isIP()
  • isEmail()
  • isUrl()
  • noWhitespace()

! min(), max() and exact() are for checking integers.
! maxLength(), minLength() and exactLength() are for checking character lenght.

All methods are chainable. You can validate as much variable as you like. Call validate() then add the rules that apply for that validation, calling again validate() will add another variable for validation, all the rules applied after the second call of validate() are applied to the second variable. When you added all the variables that needs to be validated just call isValid() this will rerun a boolean value. If you get false you can check what went wrong with getErrors().

validate(value, field_name)

This method prepares a given value for validation. The first parameter value is the parameter to be validated. The second field_name is optional, this is displayed in the error message.

getErrors()

This method returns false if no errors are present or array containing all the errors that occurred during validation.

isValid()

Calling this method ends the validation loop and validates all the added values with their rules attached to them. Validating new values after that starts a new validation loop.

setMsg(msg_name, new_msg)

This method changes the default error message that will be displayed when an error occurred. You can use this to add your own custom error messages.

var new_msg = '{1} value must must be less than {0}';
v.setMsg('maxLength', new_msg);

// old msg: {1} integer value must not exceed {0}
// new msg: {1} value must must be less than {0}

You can change all error messages for each method, just by adding as first parameter it's name and as second the new message. The characters {0} will be replaced with the validation value and {1} with the field_name that you specify in the validate() method as second parameter.

Methods that use both {0} and {1}, all ohter methods use only {1}.

  • min(val)
  • max(val)
  • exact(val)
  • maxLength(val)
  • minLength(val)
  • exactLength(val)
  • matches(val)

Or simply, methods that use both, are methods that have a val parameter.