API

API

Following examples assumes default bootstrap styles are used. To findout how to override the styles please refer to the Readme.

Required validation

You can always override the default validation message in the last parameter for the validator. In case of required validator the only parameter is the message.

<form name="introform" ng-controller="intro">
    <!--you can use
        <div class="form-group" validator="required">
        if you don't want to override the validation message-->
    <div class="form-group" validator="required[Field is required]">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Specify control to validate if there are multiple controls inside the parent

<form name="introform" ng-controller="intro">
    <div class="form-group" validator="required" v-input="requiredField">
        <label for="requiredField">Required Field</label>
		<input type="text" class="form-control" id="nonValidatedField" name="nonValidatedField"
               placeholder="Non validated Field" ng-model="nonValidatedField">
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Dynamic validation

All the validation parameters can be configured using model, also it can be enabled or disabled

<form name="introVariableform" ng-controller="introVariable">
    <div class="form-group">
        <label for="requiredField">Enable validation</label>
        <input type="checkbox" class="checkbox" ng-model="model.enableValidation">
    </div>
    <div class="form-group">
        <label for="requiredField">Validation Message</label>
        <input type="text" class="form-control" ng-model="model.validationMessage">
    </div>
    <div class="form-group" validator="required[model.enableValidation,model.validationMessage]">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introVariableform.$valid">Submit</button>
</form>

String validation

String validation accepts 3 arguments. First one for minimum length, second for maximum length and third for the message.

<form name="introform" ng-controller="intro">
    <!--you can use
        <div class="form-group" validator="string[2]">
        or <div class="form-group" validator="string[2,,should be more than 2 characters]">
        if you want only to validate minimum length-->
    <!--also you can use
        <div class="form-group" validator="string[,3]">
        or <div class="form-group" validator="string[,3,should be less than 3 characters]">
        if you want only to validate max length-->
    <div class="form-group" validator="string[2,3]">
        <label for="field2To3">2 to 3 Length Field</label>
        <input type="text" class="form-control" id="field2To3" name="field2To3"
               placeholder="With Default Message" ng-model="field2To3">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Number validation

Number validation accepts 3 arguments. First one for minimum value, second for maximum value and third for the message.

<form name="introform" ng-controller="numbers">
    <div class="form-group" validator="number[200,300]">
        <label for="field2To3">Number between 200 and 300</label>
        <input type="text" class="form-control" id="field2To3" name="field200To300"
               placeholder="Enter a Number" ng-model="model.field200To300">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Pattern validation

Validaion based on regular expressions.

<form name="introform" ng-controller="pattern">
    <div class="form-group" validator="regex['\S+@\S+\.\S+']">
        <label for="fieldRegex">Specific pattern</label>
        <input type="text" class="form-control" id="patternField" name="patternField"
               placeholder="Enter a text" ng-model="model.patternField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Email validation

Validation for email address

<form name="introform" ng-controller="email">
    <div class="form-group" validator="email">
        <label for="fieldEmail">Email</label>
        <input type="text" class="form-control" id="emailField" name="emailField"
               placeholder="Enter an email address" ng-model="model.emailField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Url validation

Validation for Url

<form name="introform" ng-controller="url">
    <div class="form-group" validator="url">
        <label for="fieldRegex">Url</label>
        <input type="text" class="form-control" id="urlField" name="urlField"
               placeholder="Enter a Url" ng-model="model.urlField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

EqualTo validation

Check given field is equal to another field (can be used for passwords and email address verifications)

<form name="introform" ng-controller="equalTo">
    <div class="form-group">
        <label for="emailField">Email</label>
        <input type="text" class="form-control" id="urlField" name="emailField"
               placeholder="Enter an email address" ng-model="model.email">
    </div>
    <div class="form-group" validator="equalTo['emailField']">
        <label for="confirmEmailField">Confirm Email</label>
        <input type="text" class="form-control" id="urlField" name="confirmEmailField"
               placeholder="Enter a Url" ng-model="model.confirmEmail">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Custom validation

Customized validations

<form name="introform" ng-controller="custom">
    <div class="form-group" validator="custom['customValidate']">
        <label for="customField">Odd Number</label>
        <input type="text" class="form-control" name="customField"
               placeholder="Enter an odd number" ng-model="model.customField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

angular.module('validatorApp').controller('custom', ['$scope', function ($scope) {
	$scope.model = { customField : 0 };
	$scope.customValidate = function(value){
	  return { valid : value%2 === 1, message : 'Should be an odd number' };  
	};
}]);

Multiple validators

Multiple validators attached to the same field.

<form name="introform" ng-controller="multiple">
    <div class="form-group" validator="regex['\S+@\S+\.\S+'],string[5,20]">
        <label for="fieldRegex">Multiple Validators</label>
        <input type="text" class="form-control" id="lengthAndRegex" name="lengthAndRegex"
               placeholder="Enter a text" ng-model="model.lengthAndRegex">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>