Burchakli jQuery Validate ning checkForm () funktsiyasidan foydalanish

EDIT:

I've added a JsFiddle so you can easily troubleshoot instead of having to set up the environment yourself. As you can see, validation is done on the Email field even before the blur event on the input element, which was triggered by the $scope.Email being changed. If you comment out the ng-show="!mainForm.validate()" on the

element, you'll see that the issue doesn't take place.


Men jQuery Validate burchakli bajarilishini ishlataman va men tekshirishga qobiliyatli Agar ariza xato xabarlarini ko'rsatmasdan amal qilsa. Onlaynda ko'rgan standart echim bu kabi jQuery Validate ning checkForm() funksiyasidan foydalanishdir:

$('#myform').validate().checkForm()

Biroq, foydalanadigan burchakli plombachi hozirda checkForm funktsiyasini amalga oshirmaydi. Men uni olib kelish uchun manba kodini o'zgartirishga urindim va qo'rqaman, men boshimni egib qo'yaman. Kod kichik va sodda bo'lib, men uni bu yerga joylashtiraman:

(function (angular, $) {
    angular.module('ngValidate', [])

        .directive('ngValidate', function() {
            return {
                require: 'form',
                restrict: 'A',
                scope: {
                    ngValidate: '='
                },
                link: function (scope, element, attrs, form) {
                    var validator = element.validate(scope.ngValidate);

                    form.validate = function (options) {
                        var oldSettings = validator.settings;

                        validator.settings = $.extend(true, {}, validator.settings, options);

                        var valid = validator.form();

                        validator.settings = oldSettings;//Reset to old settings

                        return valid;
                    };

                    form.numberOfInvalids = function() {
                        return validator.numberOfInvalids();
                    };

                    //This is the part I've tried adding in.
                    //It runs, but still shows error messages when executed.
                    //form.checkForm = function() {
                   // return validator.checkForm();
                    //}
                }
            };
        })

        .provider('$validator', function() {
            $.validator.setDefaults({
                onsubmit: false//to prevent validating twice
            });

            return {
                setDefaults: $.validator.setDefaults,
                addMethod: $.validator.addMethod,
                setDefaultMessages: function (messages) {
                    angular.extend($.validator.messages, messages);
                },
                format: $.validator.format,
                $get: function() {
                    return {};
                }
            };
        });
}(angular, jQuery));

Xabarni ko'rsatish yoki yashirish uchun uni quyidagi tarzda ishlatishni xohlayman:


Please correct any errors above before saving.

Faqatgina ! MainForm.validate() kodini ishlatmaslik sababli, ular "blurred" bo'lmaganidan oldin xato xabarlarni elementlarga ko'rsatilishiga olib keladi, qochish. checkForm() funktsiyasini ushbu burchak ko'rsatmasiga kiritishimga yordam bera oladimi?

8
Iltimos, hech kimga javob bermasangiz, meni shaxsiy suhbatlarga taklif qilishni to'xtating.
qo'shib qo'ydi muallif Sparky, manba
Haqiqatni to'xtataylik: hamma narsani e'tiborsiz qoldiring va faqatgina your jsFiddle demosini birinchi tahrirda tomosha qiling . , Demo noto'g'ri nima demoqchi va buning o'rniga qanday amalga oshirilishi kerak?
qo'shib qo'ydi muallif Sparky, manba
"The XY Problem" ning ishi kabi ko'rinadi: meta.stackexchange.com/a/233676/157574
qo'shib qo'ydi muallif Sparky, manba
Kechirasiz, lekin ularga javob bergan har qanday bildirishnoma yo'q. Menga ishoning, men shu zahotiyoq tezda umid qilardim. Chat funksiyasi barqaror emas va tugatilmagan. Uzr so'rayman.
qo'shib qo'ydi muallif Jacob Stamm, manba
Bunga qaror qilmadim. Mening ikkala savolimda va marhamatimda ham aytib o'tilganidek, yechim faqat ikkita mezonga mos keladi. Bir nechta sabablarga ko'ra, ishonaman checkForm() bu bajarishning eng yaxshi usuli, lekin agar bo'lmasa, unda bu yaxshi. Menda bir yechim bor ekan. Agar sizda echim uchun biron bir fikr bo'lsa, checkForm() ni o'z ichiga oladimi yoki yo'qmi, men o'yindim. Men faqat imkon qadar kam ish yaratishga harakat qilaman va hatto boshqa odamlar uchun plaginni ham yaxshilashga harakat qilaman.
qo'shib qo'ydi muallif Jacob Stamm, manba
Men XQ muammosini hurmat bilan qabul qilaman, chunki jQuery Validate ushbu muammoni checkForm() funksiyasi bilan hal qilib qo'ygan. Agar bu oddiy funksiyani burchakli plaginlardan osonlikcha olishim mumkin bo'lsa, men o'z shaxsiy xato xabarim ng-show ni ! o'rniga mainForm.checkForm() code>! mainForm.validate() . Agar bu texnik sabablarga ko'ra amalga oshirilmasa, men bu plaginni ishlatib, to'xtataman. Ammo shuni ko'rsatmoqchimanki, bu mening mahalliy jQuery Validate-ga juda ishonadigan mening mavjud, katta loyihani angularizatsiyalash uchun eng yaxshi echimdir.
qo'shib qo'ydi muallif Jacob Stamm, manba
@Sparky Foydalanuvchida yozish paytida blur holatini oldin yozayotganida, tekshiruvni amalga oshirib, demo xatosini buzish. Kerakli xatti-harakatlar bulutni keltirib chiqargunga qadar yoki hech bir shaklni topshirmaguncha hech narsa qilmaslikdir. Mening dizaynim shu bilan farq qiladi, shuning uchun quyida joylashgan qo'shimcha deb ataluvchi xatolik xabarlarni ko'rsatmoqchiman (mening ilovamdagi juda uzoq sahifalar va foydalanuvchilar endilikda xabar yuborishdan oldin yo'qoladi) tugmasi). Shunday qilib, modelga kiritilgan har qanday o'zgarish $ digest siklini ishga tushiradi va bu mening shaxsiy xato xabarimning ng-show validate() funktsiyasiga sabab bo'ladi, .
qo'shib qo'ydi muallif Jacob Stamm, manba

6 javoblar

CheckForm() funktsiyasini plaginga quyidagi kabi qo'shishingiz mumkin.

    (function (angular, $) {
    angular.module('ngValidate', [])

        .directive('ngValidate', function() {
            return {
                require: 'form',
                restrict: 'A',
                scope: {
                    ngValidate: '='
                },
                link: function (scope, element, attrs, form) {
                    var validator = element.validate(scope.ngValidate);

                    form.validate = function (options) {
                        var oldSettings = validator.settings;

                        validator.settings = $.extend(true, {}, validator.settings, options);

                        var valid = validator.form();

                        validator.settings = oldSettings;//Reset to old settings

                        return valid;
                    };

                    form.checkForm = function (options) {
                        var oldSettings = validator.settings;

                        validator.settings = $.extend(true, {}, validator.settings, options);

                        var valid = validator.checkForm();

                        validator.submitted = {};

                        validator.settings = oldSettings;//Reset to old settings

                        return valid;
                    };

                    form.numberOfInvalids = function() {
                        return validator.numberOfInvalids();
                    };
                }
            };
        })

        .provider('$validator', function() {
            $.validator.setDefaults({
                onsubmit: false//to prevent validating twice
            });

            return {
                setDefaults: $.validator.setDefaults,
                addMethod: $.validator.addMethod,
                setDefaultMessages: function (messages) {
                    angular.extend($.validator.messages, messages);
                },
                format: $.validator.format,
                $get: function() {
                    return {};
                }
            };
        });
}(angular, jQuery));

Please find the updated jsFiddle here https://jsfiddle.net/b2k4p3aw/

Reference: Jquery Validation: Call Valid without displaying errors?

1
qo'shib qo'ydi
Bu juda yaxshi! Katta rahmat. Qizig'i shundaki, nima uchun validator.submitted = {} kerakli chiziq kerak?
qo'shib qo'ydi muallif Jacob Stamm, manba
Asosan, onkeyup kirish elementi ikkita tinglovchiga ega. Foydalanuvchining tugmachani bosganda birinchi navbatda burchakli va boshlang'ich burchakka digest aylanishi bilan o'rnatilgan tinglovchini o'chiradi. Buni ng-show = "! MainForm.checkForm ()" va checkForm() funksiyasini chaqiradi. Shundan so'ng, jQuery validatori tomonidan o'rnatilgan tinglovchi yong'inni o'chiradi va checkForm funktsiyasini bajarishda qo'shilgan yuborilgan ob'ektidagi xatoliklarni ko'rsatishga harakat qiladi. Shuning uchun checkForm() deyildikten so'ng xatolar ko'rsatmasak, submit ob'ektini tiklashimiz kerak.
qo'shib qo'ydi muallif Tharaka Wijebandara, manba

kodni tekshirish uchun ushbu kodni sinab ko'ring

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <div class="form-group">   
    <input  type="text"  ng-class="{ 'has-error' : userForm.name.$invalid &&    !userForm.name.$pristine }" ng-model="name" name="name" class="form-control" placeholder="{{ 'regName' | translate }}" required>
  
Your name is required.

</div> <div class="form-group"> <input type="tel" ng-class="{ 'has-error' : userForm.mob.$invalid && !userForm.mob.$pristine }" ng-model="mob" class="form-control" name="mob" ng-maxlength="11" ng-minlength="11" ng-pattern="/^\d+$/" placeholder="{{ 'regPhone' | translate }}" required>
Enter a valid number

</div> <div class="form-group"> <input type="email" ng-model="email" name="email" class="form-control" placeholder="{{ 'regEmail' | translate }}" required>
Enter a valid email.

</div> <div class="form-group"> <input type="password" ng-model="pass" name="pass" class="form-control" placeholder="{{ 'regPass' | translate }}" minlength="6" maxlength="16" required>
Too short Min:6 Max:16

<input type="password" ng-model="repass" class="form-control" ng-minlength="6" placeholder="{{ 'regConPass' | translate }}" ng-maxlength="16" required> </div> <button class="loginbtntwo" type="submit" id="regbtn2" ng-disabled="userForm.$dirty && userForm.$invalid" translate="signUp" ></button> </form>
1
qo'shib qo'ydi
O'zingizning qaroringizni ishlata olmaysiz, chunki u burchakni tekshirish plaginini ishlatmaydi.
qo'shib qo'ydi muallif Jacob Stamm, manba

Burchakni tekshirish plaginini biroz o'zgartirishi kerak. Sizning kodingizning ish versiyasi JSFiddle . Yangilangan plagin kodi va asl kodingizga bir nechta o'zgartirishlarni eslatib o'ting.

Yangilangan plagin kodi buni faqat validator.SetDefaults parametriga qo'shadi:

errorPlacement: function(error,element) { return true; }//to hide default error message

Keyinchalik maxsus xato xabarini yashirish/ko'rsatish uchun tortib olsa o'zgaruvchisini qo'llaymiz:

$scope.OnSubmit = function(form) {
if (form.$dirty) {
    if (form.validate()) {
    //form submittal code
    } else {
    $scope.FormInvalid = true;
  }
}
1
qo'shib qo'ydi
Bu men xohlamagan narsa emas. Faqatgina kirish kodidan blur hodisasidan so'ng yoki men qo'lda bo'lsa, vaqtida standart xato xabarlarni ko'rsatishni xohlayman form.validate() funktsiyasini bajaring. I da ostidagi ushbu qo'shimcha xabarni ko'rsatishni xohlayman. Odatiy xabarlarni rad etib bo'lmaydi, men qo'rqaman.
qo'shib qo'ydi muallif Jacob Stamm, manba

Agar savolingizni to'g'ri tushunsangiz, elektron pochta manzili noto'g'ri bo'lsa va siz xato xabarini ko'rsatmoqchi bo'lsangiz, xato xabari ko'rsatmoqchi bo'lishni xohlaysiz.

You can achieve this by setting the input type to email like this <input type=email>

Burchak, agar $ valid shakliga xususiyatni qo'shsa, agar yuborilgan matn to'g'ri kelsa, tekshiruvchilaringizni tekshirishingiz mumkin. Shunday ekan, biz bu o'zgaruvchiga faqat tekshiruvchiga kirishimiz va uni o'zgartirishimiz kerak. (Chunki biz noto'g'ri bo'lsa xato ko'rsatishni xohlaymiz)

$scope.onSubmit = function() {
   //Decide here if you want to show the error message or not
    $scope.mainForm.unvalidSubmit = !$scope.mainForm.$valid
}

I also added a submit button that uses browser validation on submit. This way the onSubmit function won't even get called and the browser will show an error. These methods don't require anything except angularjs. You can check the updated JSFiddle here

onSubmit funktsiyasi chaqirilganda va tugmani bosganingizda qanday qiymatni qabul qilishini ko'rish uchun konsolingizni ochishingizga ishonch hosil qiling.

0
qo'shib qo'ydi
Rahmat, lekin aytganimdek, bu men bilan bog'liq muammo emas. Menda tasdiqlash qoidalari butunlay ishlab chiqilgan. Yordamga muhtoj bo'lgan narsalar jQuery Validate ning tagidagi checkForm() funktsiyasiga kirish burchagidagi Validate plaginidan
qo'shib qo'ydi muallif Jacob Stamm, manba
Men oddiygina misolga muhtoj bo'lganim uchun faqat elektron pochtani tekshirishni o'z ichiga olgandim. Aslida ilgari rivojlangan tekshiruvdan foydalanaman, ammo bu men bilan bog'liq muammo emas. Bundan tashqari, Burchli Validate plaginini burchakli tasdiqlash kabi o'rnatilgan $ valid xususiyatidan foydalanmaydi. Menimcha, bu yechim bu plaginni ishlatishi kerak.
qo'shib qo'ydi muallif Jacob Stamm, manba
To'g'ri, shuning uchun burchakdagi maxsus tekshirgichlar ni qo'shishingiz mumkin. Model qiymatini oladigan va qiymatni tasdiqlaydigan ko'rsatmalarni yaratasiz. E-pochtaning tasdiqlanishi bilan bir xil. Agar sizga kerak bo'lsa, hujjatlarni o'qib chiqishingiz mumkin yoki bu yerni bosing yana bir misol bilan qanday ishlashini batafsil tushuntirib beraman.
qo'shib qo'ydi muallif digijap, manba

you can achieve onblur event with ng-show="mainForm.Email.$invalid && mainForm.Email.$touched" to

tag

by default mainForm.Email.$touched is false, on blur it will change to true

to'g'ri aniqlash uchun <input> tag turini elektron pochtaga o'zgartiring

kirish yorlig'ini tahrirlashda xato xabari ko'rsatmoqchi bo'lmasangiz, ng-keydown = "mainForm.Email. $ touched = false"

Angular-validate.js plaginini ishlatmadim

<div ng-app="PageModule" ng-nazorat qiluvchi="Mainnazorat qiluvchi" class="container">
<form method="post" name="mainForm" ng-submit="OnSubmit(mainForm)" >

Please correct any errors above before saving.

<button type="submit">Submit</button> </form> </div>

Updated code : JSFiddle

AngularJs formasi tekshiruvi

Burchli tekshiruv haqida batafsil ma'lumot


2-yangilash

formasi haqiqiy yoki yaroqsiz ekanligini tekshiradi

// added checForm, also adds valid and invalid to angular
form.checkForm = function (){
    var valid =  validator.form();

    angular.forEach(validator.successList, function(value, key) {
     scope.$parent[formName][value.name].$setValidity(value.name,true);
    });

    angular.forEach(validator.errorMap, function(value, key) {
      scope.$parent[formName][key].$setValidity(key,false);
    });

    return valid
}

to hide default messages adding by jQuery validation plugin add below snippet, to $.validator.setDefaults

app.config(function ($validatorProvider) {
    $validatorProvider.setDefaults({
        errorPlacement: function(error,element) {//to hide default error messages
              return true;
           }
    });
});

Bu erda o'zgartirilgan plagin o'xshaydi

(function (angular, $) {
angular.module('ngValidate', [])

    .directive('ngValidate', function() {
        return {
            require: 'form',
            restrict: 'A',
            scope: {
                ngValidate: '='
            },
            link: function (scope, element, attrs, form) {
                var validator = element.validate(scope.ngValidate);
                var formName = validator.currentForm.name;

                form.validate = function (options) {
                    var oldSettings = validator.settings;

                    validator.settings = $.extend(true, {}, validator.settings, options);

                    var valid = validator.form();

                    validator.settings = oldSettings;//Reset to old settings

                    return valid;
                };

                form.numberOfInvalids = function() {                           
                    return validator.numberOfInvalids();
                };

               //added checkForm
                form.checkForm = function (){
                    var valid =  validator.form();

                    angular.forEach(validator.successList, function(value, key) {
                     scope.$parent[formName][value.name].$setValidity(value.name,true);
                    });

                    angular.forEach(validator.errorMap, function(value, key) {
                      scope.$parent[formName][key].$setValidity(key,false);
                    });

                    return valid
                }
            }
        };
    })

    .provider('$validator', function() {
        $.validator.setDefaults({
            onsubmit: false//to prevent validating twice            
        });

        return {
            setDefaults: $.validator.setDefaults,
            addMethod: $.validator.addMethod,
            setDefaultMessages: function (messages) {
                angular.extend($.validator.messages, messages);
            },
            format: $.validator.format,
            $get: function() {
                return {};
            }
        };
    });
  }(angular, jQuery));

nazorat qiluvchi

app.nazorat qiluvchi("Mainnazorat qiluvchi", function($scope) {
$scope.Email = "";
$scope.url = "";
$scope.isFormInValid = false;//to hide validation messages
$scope.OnSubmit = function(form) {
   //here you can determine
    $scope.isFormInValid = !$scope.mainForm.checkForm(); 

     return false; 
 }
 })

har bir kirish yorlig'ida (elektron pochta uchun namuna) bo'lishi kerak

ng-show="isFormInValid && !mainForm.Email.$invalid "

agar ariza va elektron pochta manzili yaroqsiz bo'lsa, tasdiqlash xabarlari ko'rsatiladi.

JSFiddle

0
qo'shib qo'ydi
Bu haqiqatan ham yaqin, lekin afsuski, kirishning bulaniqcha hodisasida in-line tasdiqlash xabarlarini ko'rsatadigan jQuery Validate default jurnali funksiyasi, endi ishlamaydi. Siz faqatgina ariza topshirganingizdan keyin hamma narsani tekshirib chiqadi. Bunga siz kiritgan ishingiz uchun juda minnatdorman, lekin menimcha, bu yechim osonroq bo'lishi kerak. checkForm() funktsiyasi allaqachon jQuery Validate-ga o'rnatilganligi sababli, funksiyani erdan yuqoriga qayta yozish shart emas. Burchak tomondan mavjud funksiyaga oddiygina kirish imkoni eng yaxshi va eng qulay usul
qo'shib qo'ydi muallif Jacob Stamm, manba
Men ko'ryapman. Ha, pastdagi ogohlantirishga qo'shimcha ravishda, standart xato xabarlari hali ko'rsatilishi kerak.
qo'shib qo'ydi muallif Jacob Stamm, manba
Kechirasiz, men sizning savolingizni tushunmayapman
qo'shib qo'ydi muallif Jacob Stamm, manba
Xo'sh, checkForm() funktsiyasini ishlatish uchun yo'q echimini topa olmadim - faqat ariza hali ham xato xabarlarini ko'rsatmasdan tekshirishga ruxsat berish kerak > Ushbu maxsus burchakli tekshiruv plaginini ishlatib . Faqatgina checkForm() funktsiyasiga diqqatni jalb qilaman, chunki u allaqachon jQuery Validate-ga o'rnatilgan bo'lib, bu burchakli plagin faqatgina bitta sarmoyadir. Shunday qilib, bu funktsiyaga burchak to'plamidan foydalanish oson bo'lishi mumkin. Menga yordam berganingiz uchun tashakkur :)
qo'shib qo'ydi muallif Jacob Stamm, manba
Qaroringiz mening misolimdan burchakni tekshirish plaginini ishlatmaydi. Bu mening ishim bo'yicha talab.
qo'shib qo'ydi muallif Jacob Stamm, manba
jQuery Validation plagini tomonidan qo'shilgan JSFiddle yonidagi ikkita xato xabari ko'rsatiladi, ulardan biri P yorlig'i, ikkinchisi Iltimos, to'g'ri elektron pochta manzilini kiriting. .
qo'shib qo'ydi muallif Pavan Kumar Jorrigala, manba
Kodni yangiladim, siz izlayotgan narsa shu
qo'shib qo'ydi muallif Pavan Kumar Jorrigala, manba
Edit 2 da eslatgan ikkinchi nuqta, hech qachon jQuery Validation plaginida standart xato xabarlarini qo'shib ko'rsatishni xohlaysizmi
qo'shib qo'ydi muallif Pavan Kumar Jorrigala, manba
shuning uchun ariza haqiqiy yoki noto'g'ri yoki yo'qligini bilmoqchi bo'lsangiz, checkForm() funktsiyasidan foydalaning
qo'shib qo'ydi muallif Pavan Kumar Jorrigala, manba

Siz $ tegilgan dan foydalanishingiz mumkin.

 
Please correct any errors above before saving.

0
qo'shib qo'ydi
Men faqat bitta kirish maydoniga ega bo'lsam, u ishlaydi. Arizamda sahifada o'nlab odamlar bo'lishi mumkin edi.
qo'shib qo'ydi muallif Jacob Stamm, manba
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks