https://github.com/njleonzhang/ionic-validate-with-toast

A pure angular validate specially for mobile app/website without jQuery dependency.
https://github.com/njleonzhang/ionic-validate-with-toast

Last synced: 7 days ago
JSON representation

A pure angular validate specially for mobile app/website without jQuery dependency.

• Host: GitHub
• URL: https://github.com/njleonzhang/ionic-validate-with-toast
• Owner: njleonzhang
• Created: 2015-12-01T03:31:58.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-25T08:30:29.000Z (about 8 years ago)
• Last Synced: 2024-10-10T01:13:19.253Z (about 1 month ago)
• Language: JavaScript
• Size: 1.59 MB
• Stars: 11
• Watchers: 0
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ionic-validate-with-toast

A pure angular validate specially for mobile app/website without jQuery dependency.

##Introduce.

[view Demo](http://codepen.io/leonz/pen/WQVPBV)

The example in sample folder can work too.

##Function

1) Show special style in time to tag the input is valid or not when user input.

2) When user submit the form, focus to the first invalid input and show a toast.

    Content in toast can be customized.

##Usage. (take a ionic project as example)

1. install the library

`bower install ionic-validate-with-toast --save`

2. link the ionicValidateWithToast.js and ionic-toast.bundle.min.js in to your project in index.html

```html

    

    

```

ionic-toast.bundle.min.js is a toast module, for detail, check https://github.com/rajeshwarpatlolla/ionic-toast

You can use your own toast module.

2) Inject the two module to your project in app.js

```javascript

angular.module('starter', ['ionic', 'ionicValidateWithToast', 'ionic-toast'])

```

3) Define the css to show the error label style in style.css

```css

label.has-error {

  border-right: 3px solid red !important;

}

```

4) Add attribute `bsy-form-validate` to your input, add `check-form` to the submit button

```html

   

       username

       

   

   login

```

`ng-minlength` is used to set min length, `ng-maxlength` is used to set max length,

`ng-pattern` set the pattern, `required` means the field is required, for detail check [angularJS input](https://docs.angularjs.org/api/ng/directive/input/)

5) In controller, define the userNameErrorTips for customized error tips.

```javascript

  .controller('controller', function ($scope) {

    $scope.userNameErrorTips = {

      required: 'please input username',

      minlength: 'This field does not match the min length',

      maxlength: 'This field does not match the max length',

      pattern: 'This field is not right',

      number: 'This field should be a number'

    }

  }

```