• 0

كيف أبرمج Tooltip valisation بـ Jquery؟

أريد ادراج أداة tooltip validation msg عن طريق Jquery، وقد حاولت ذلك باستعمال الكود التالي:

  • كود Jquery:
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
            })
        }
    }
})
  • هذا كود Html:
<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>

لكن لم يفلح معي الأمر، فكيف ذلك؟

هذه صور للأداة:

JldBn.thumb.jpg.a32a3d076517375ec3acd609xZcey.thumb.jpg.0a72e74178ae16705ec167d0

 

تمّ تعديل بواسطة سعاد

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

نعم يمكن إدراج حقل مع امكانية التحقق عن طريق tooltip validation msg.

المثال على JSFiddle.

كود jQuery :

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');
  }
  

كود html:

<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)">

مراجع:

Documentation.

Check visibility

 

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن