Code Monkey home page Code Monkey logo

angular-validator's Introduction

Angular-Validator

Build Status

What?

Angular-Validator is an easy to use, powerful and lightweight AngularJS validation directive.

Why?

Despite Angular's awesomeness, validation in Angular is still a pain in the ass. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code.

Features

  • Validate using REGEX, required, or custom validation functions
  • Validates elements on submit with option to validate individual elements on blur or dirty as well.
  • Prevents submission if the form is invalid
  • Built in reset form method
  • Adds validation error/success messages as sibling elements
  • Adds .has-error classes to invalid elements
  • Adds .has-error classes to validation message
  • Supports multi-field dependent validation (one field depends on another such as password matching)
  • Works with or without novalidate
  • Works with Bootstrap out of the box (although Bootstrap is not required)

Demo

Check out the demo!

Feedback

Need a feature, found a bug? Create an issue. Dont have any issues, love the project? Give it a star!

Installation

  1. Using bower: bower install tg-angular-validator
  2. Include angular-validator.min.js into your application's HTML
  3. Add angularValidator as a dependancy of your Angular module

Usage

Basic usage for required fields

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        required>

Usage with a custom validator function

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validator = "myCustomValidationFunction(form.firstName)">

Usage with validation on blur

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validate-on="blur"
        validator = "myCustomValidationFunction(form.firstName)">

Usage with validation on dirty

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validate-on="dirty"
        validator = "myCustomValidationFunction(form.firstName)">

Usage with custom validator literal

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validator = "form.firstname === 'john'">

Usage with REGEX and required

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        ng-pattern = "\regex\"
        required>

Usage with custom error message text

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        ng-pattern = "\regex\"
        invalid-message = "'Please enter the word regex'"
        required-message = "'First name is required'"
        required>

Usage with conditional invalid/required message text

<input  type = "text"
        name = "firstName"
        ng-model = "person.firstName"
        validator= "myCustomValidationFunction(person.firstName) === true"
        invalid-message = "myCustomValidationMe(person.firstName)"
        required-message = "myCustomValidationFunction(person.firstName)"
        required>
  • Note that the validator and the message function do not need to be the same function. If you choose to make them the same function make sure to return true on valid input.

Setting up the form

<form novalidate angular-validator angular-validator-submit="myFunction(myBeautifulForm)" name="myBeautifulForm">
    <input>
    <select></select>
    ....
    <button type="submit">Submit</button>
</form>

Use angular-validator-submit to specify the function to be called when the form is submitted. Note that the function is not called if the form is invalid.

Resetting the form

myBeautifulForm.reset()

Validty API Uses standard Angular $valid and $invalid properties

myForm.$invalid
myForm.$valid
myElement.$valid
myElement.$invalid
myElement.$angularValidator

FAQ

It's not working!? Make sure you have assigned a unique name to each form element as well as the form itself. Make sure you have properly followed the installation instructions.

Why pass value to custom validator functions? Passing the value to the custom validator function allows the function to be easier to test.

How do I display success messages/classes? The library does not currently support success classes and messages. Feel free to contribute.

What if I want error messages to display before the user types anything? You are using the wrong library.

What if I want to disable the submit button if the form is invalid? You can add ng-disabled="myForm.$invalid" on the submit button.

CONTRIBUTING

See CONTRIBUTING.md

License

MIT

angular-validator's People

Contributors

czarly avatar jakobovski avatar

Watchers

Victor Liu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.