Twitter Bootstrap Question posted in

Twitter bootstrap – How to do auto tooltip validation msg?

Here I created sample file for validation, which is working fine…

But My requirement is I need to do some modification on that while validating. Error message need to show in auto tooltip. It needs to be shown automatically when there is error and hide automatically once error cleared. Until error clear popup need to be stay.

If it is possible without jquery or else with jquery also fine. 

var app = angular.module('myapp', ['UserValidation']);

myappCtrl = function($scope) {
    $scope.formAllGood = function () {
        return ($scope.usernameGood && $scope.passwordGood && $scope.passwordCGood)
    }
        
}

angular.module('UserValidation', []).directive('validUsername', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                // Any way to read the results of a "required" angular validator here?
                var isBlank = viewValue === ''
                var invalidChars = !isBlank && !/^[A-z0-9]+$/.test(viewValue)
                var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20)
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('invalidChars', !invalidChars)
                ctrl.$setValidity('invalidLen', !invalidLen)
                scope.usernameGood = !isBlank && !invalidChars && !invalidLen

            })
        }
    }
}).directive('validPassword', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var isBlank = viewValue === ''
                var invalidLen = !isBlank && (viewValue.length < 8 || viewValue.length > 20)
                var isWeak = !isBlank && !invalidLen && !/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/.test(viewValue)
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('isWeak', !isWeak)
                ctrl.$setValidity('invalidLen', !invalidLen)
                scope.passwordGood = !isBlank && !isWeak && !invalidLen

            })
        }
    }
}).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var isBlank = viewValue === ''
                var noMatch = viewValue != scope.myform.password.$viewValue
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('noMatch', !noMatch)
                scope.passwordCGood = !isBlank && !noMatch
            })
        }
    }
})
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <form  name="myform" class="form form-horizontal" ng-controller="myappCtrl" novalidate>
    <legend>Angular User Validation with Bootstrap Decorations</legend>
    <div class="control-group" ng-class="{error:!myform.username.$valid}">
        <label for="inputUsername" class="control-label">Username:</label>
        <div class="controls">
            <input type="text" id="inputUsername" name="username" ng-model="username" valid-username />
            <div class="help-inline">
                <span ng-show="!!myform.username.$error.isBlank">Username Required.</span>
				<span ng-show="!!myform.username.$error.invalidChars">Username must contain letters &amp; spaces only.</span>
                <span ng-show="!!myform.username.$error.invalidLen">Username must be 5-20 characters.</span>
            </div>
        </div>
    </div>
    <div class="control-group" ng-class="{error:!myform.password.$valid}">
        <label for="inputPassword" class="control-label">Password:</label>
        <div class="controls">
            <input type="text" id="inputPassword" name="password" ng-model="password" valid-password />
            <div class="help-inline">
                <span ng-show="!!myform.password.$error.isBlank">Password Required.</span>
                <span ng-show="!!myform.password.$error.isWeak">Must contain one upper &amp; lower case letter and a non-letter (number or symbol.)</span> 
                <span ng-show="!!myform.password.$error.invalidLen">Must be 8-20 characters.</span>
            </div>
        </div>
    </div>
    <div class="control-group" ng-class="{error:!myform.password_c.$valid}">
        <label for="password_c" class="control-label">Confirm Password:</label>
        <div class="controls">
            <input type="text" id="password_c" name="password_c" ng-model="password_c" valid-password-c />
            <div class="help-inline"> 
                <span ng-show="!!myform.password_c.$error.isBlank">Confirmation Required.</span>
                <span ng-show="!!myform.password_c.$error.noMatch">Passwords don't match.</span>
            </div>
        </div>
    </div>
    <div class="form-actions" ng-show="formAllGood()">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
    </form></div>
Tags:

2

Answers


  1. 0

    Best solution is to use Parsley.js

    Why Parsley :

    • Validation Event can be customized (onsubmit , onkeyup , or any other event )
    • Validation Style can be customized
    • Validation message will automatically disappear , once input satisfies conditions

    Check their examples

    Login or Signup to reply.
  2. 0

    Yes it is possible to show/hide popover on any event. Following code depicts a validate function for numbers using popover.

    JSFiddle.

    function validate(el) {
  var regex = /^d+$/g;
  var valid = regex.test(el.value);
  if (!valid) {
    
    // Check if popover is already visible to handle flicker effect.
    if ($("#txtInput").next('div.popover').length == 0) {
      
      $('#txtInput').popover({
        placement: 'bottom',
        content: 'This is not a valid entry'
      }).popover('show');
      
    }
  } else {
    $('#txtInput').popover('hide');
  }
  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<input type="text" id="txtInput" onkeyup="validate(this)">

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search