سعاد نشر 26 ديسمبر 2015 أرسل تقرير مشاركة نشر 26 ديسمبر 2015 (معدل) أريد ادراج أداة 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 & 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 & 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>لكن لم يفلح معي الأمر، فكيف ذلك؟هذه صور للأداة: تم التعديل في 26 ديسمبر 2015 بواسطة سعاد اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 E.Nourddine نشر 27 ديسمبر 2015 أرسل تقرير مشاركة نشر 27 ديسمبر 2015 (معدل) نعم يمكن إدراج حقل مع امكانية التحقق عن طريق 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 تم التعديل في 27 ديسمبر 2015 بواسطة E.Nourddine اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
سعاد
أريد ادراج أداة tooltip validation msg عن طريق Jquery، وقد حاولت ذلك باستعمال الكود التالي:
لكن لم يفلح معي الأمر، فكيف ذلك؟
هذه صور للأداة:
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.