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

jquery.simple.validator

v1.0.2

Published

Simple, customizable, lightweight jquery plugin validator

Downloads

4

Readme

jquery.simple.validator

Easy, lightweight and customizable jquery validator.

Description

It's a plugin for jQuery that performs easy client-side validation compatible with all frameworks (PHP, ASP, ASP.Net, Java...). The difference with other validators is that this plugin can perform validation in any HTML container such a form, div, fieldset, table, span, ....

Validations

  • Possibility to show error next to field or error summary.
  • Possibility to validate on click or autovalidate when leave field (onblur).
  • Error CSS customization up to the user.
  • Email validator
  • IBAN validator
  • Required field validator
  • Dates validator (with format definition)
  • Drowdown element selected validator
  • Numbers validator
  • Radio elements should be selected validator
  • Easy way to create a custom validator
  • Validate a group of fields, or just a single field.

External example

External easy example

Dependencies

jQuery 1.7 or higher

Compatibility

  • PHP, JSP, Servlets, Java, Ruby, Python, GoLang...
  • Other jQuery plugins
  • ASP.Net Web Forms, yes no problem with the single-form-architecture of asp.net because you can use other html containers than

How to include

<head>
    <script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>
</head>

How to use it

Just use the data tag standard, that is based on set data-XXXX where XXXX is the operation you want and data-XXXX-msg with the message you want. By default, the validator plugin creates a new span after the control with the error message. When the error is corrected, the control dissapears.

Required field validator

data-required: Indicates the field is required

data-required-msg: Error message

Specific error message control

data-message-control Id of the html control where to show the message. Can be applied in all fields.

Skip validation on a field

data-disable-validation The control with that tag, will not be validated

Only numbers accepted

data-only-numbers: The element should only have numbers ( , . - )

data-only-numbers-msg: Error message

Date format

data-date-format="dd/MM/yyyy"

data-date-format-separator="/"

data-date-format-msg: Error message

Drop down value not selected

data-select-value-different="0" //You have to select an index different than 0 `data-select-value-different-msg: Error message

IBAN format

data-iban: Validates IBAN Bank format

data-iban-msg: Error message

Email

data-email: Validates valid email entry

data-email-msg: Error message

Input radio

data-radio-selected: The radio button should have a value selected or checked

data-radio-selected-msg: Error message

Methods

$(#container).initialize(options) Initialize the plugin with the specified options. If no options passed, will use default options.

$(#container).validate() Start all validations

$(#field_name).validateField() Validate just the specified field.

$(#container).registerValidator(validator_name,validation_function) Register a custom made validator

Other helper methods

$(#field_name).isEmail(): Email format is valid

$.isEmail("string_email"): Email format is valid

$(#field_name).isEmpty(): No data introduced in field

$.isEmpty("string to check"): No data introduced in field

By example

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>

<div id="container">
    <!-- REQUIRED FIELD -->
    <label>Required Field: </label><br/>
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>

    <input type="button" value="Validate" onclick='javascript:validate();' />
</div>


<script type="text/javascript">
    function validate() {
        $("#container").initialize();
        var ok = $("#container").validate();
        if (!ok)  alert("There are errors");
        else alert("Form is ok");
    }
</script

All validators example

<!-- REQUIRED FIELD -->
<label>Required Field: </label><br/>
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>
<!-- EMAIL VALIDATION -->
<label>EMAIL: </label><br />
<input type="email" id="email" data-email data-email-msg="Email is not correct"  /><br /><br />
<!-- ONLY NUMBERS -->
<label>Only Numbers (Accepts . , -): </label><br />
<input type="text" id="phone" data-only-numbers data-only-numbers-msg="You should put only numbers" /><br /><br />
<!-- DATE FORMAT VALIDATOR -->
<label>Date format (dd/mm/yyyy): </label><br />
<input type="text" id="date" data-date-format="dd/MM/yyyy" data-date-format-separator="/" data-date-format-msg="The date format is not correct" /><br /><br />
<!-- select a value -->
<select id="select" data-select-value-different="0" data-select-value-different-msg="You should select a value">
    <option value="0">Select a value</option>
    <option value="1">First value</option>
</select><br/><br />
<!-- IBAN VALIDATION -->
<label>IBAN: </label><br />
<input type="text" id="iban" data-iban data-iban-msg="IBAN format is not correct" value=""  /><br /><br />
<!-- REQUIRED FIELD with message in specific control -->
<label>Required Field with message in specific control: </label><br />
<input type="text" id="emailse" data-required data-required-msg="Field is required in specific error" data-message-control="specificError"/><br /><br />
<span style="color:orangered;" id="specificError"></span><br/><br/>
<!-- REQUIRED FIELD VALIDATION DISABLED -->
<label>Required Field with validation disabled: </label><br />
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" data-disable-validation /><br /><br />
<!-- Radio -->
<label>Radio should be selected: </label><br />
<input type="radio" id="radio-control" data-radio-selected data-radio-selected-msg="You should select a radio option" data-message-control="specificErrorRadio" value="1" /> Option 1<br />
<input type="radio" id="radio-control" value="2" /> Option 2<br />
<span style="color:orangered;" id="specificErrorRadio"></span><br />

Configurations

errorClass (string) Css class of the error message is going to be shown. (by default: validator_error)

scrollToFirstError (true|false) When errors are processed, scroll automatically the page till the first error. (by default true)

scrollToFirstElementTime (integer) Speed in milliseconds of ths scroll (by defualt, 1000)

scrollToFirstElementOffset (integer) Offset in pixels of the scroll, to leave a margin when scrolling (by default 0)

debug (true|false) Show validation status in developer console (by default false)

dataDynamicRevalidate (true|false) Autovalidate fields when blur (by default false)

validationSummary (true|false) Activate if you want to show the errors in a central spot (by default false)

validationSummaryControl (string) The id of the control where to show the summary

How to set the options:

$("#container").initialize({ 
    debug: true, 
    errorClass: 'my_css_error_class', 
    scrollToFirstError: true,
    scrollToFirstElementOffset : 100});

How to define your own custom validators or custom errors

The method registerValidator() receives 2 parameters

  • data-tag-validator-name:
  • function that performs validation. The functions receives as a parameter a jQuery object with the field that is being validated. Has to return true if validation is OK, or false if there is an error.

Example:

$("#container").initialize();

$("#container").registerValidator("data-personal-validator",
    function (control) {
        if (control.val() == "ok") return true;
        else return false;
    });

var ok = $("#container").validate();

How to validate just a field

    $("#field_id").initialize();
    var ok = $("#field_id").validateField();