Проверка петрушки не работает Angular JS
Я использую parsely валидацию с angular js, но не работает то, что я делаю неправильно, может кто-нибудь исправить или обнаружить ошибку в моем коде. если я отправляю это так, это не работает, не показывая мне никакой ошибки как parsely показывают, согласно их атрибутам. Я также добавляю parsely библиотеки и не получаю никакой ошибки, связанной с этим, так что происходит не так.
LoginView.html
<form class="form-horizontal" ng-submit='login()' data-validate="parsley">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="login-Name" class="col-lg-3 form-label">User Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name" data-type="alphanum" data-required="true" />
</div>
</div>
<div class="form-group">
<label for="login-Password" class="col-lg-3 form-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password" data-type="alphanum" data-required="true" data-minlength="6" data-minlength="6" data-maxlength="20"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Login
</button>
</div>
</form>
loginController.js
$scope.login = function() {
var user = {
"username" : $scope.LoginName,
"password" : $scope.LoginPass
}
};
4 ответа
Мне пришлось немного поработать и поиграть с вещами, но в итоге я создал директиву под названием parsleyValidateInput
, Поместите это на каждом входе, который вы хотите проверить с петрушкой.
CoffeeScript:
angular.module('app').directive 'parsleyValidateInput', ($timeout) ->
link: (scope, element, attrs) ->
element.on 'remove', ->
element.closest('form').parsley('removeItem', "##{attrs.id}")
$timeout ->
element.attr('id', "input_#{_.uniqueId()}") unless element.attr('id')
element.closest('form').parsley('addItem', "##{attrs.id}")
JavaScript:
angular.module('app').directive('parsleyValidateInput', function($timeout) {
return {
link: function(scope, element, attrs) {
element.on('remove', function() {
return element.closest('form').parsley('removeItem', "#" + attrs.id);
});
return $timeout(function() {
if (!attrs.id) {
attrs.id = "input_" + (_.uniqueId());
element.attr('id', attrs.id);
}
return element.closest('form').parsley('addItem', "#" + attrs.id);
});
}
};
});
использовать:
<form parsley-validate>
<div class='row' ng-repeat='book in books'>
<input parsley-validate-input type='text' ng-model='books' required>
</form>
Есть самый простой способ сделать это, это директива, которую я использую:
angular.module('app').directive('validateForm', function() {
return {
restrict: 'A',
controller: function($scope, $element) {
var $elem = $($element);
if($.fn.parsley)
$elem.parsley();
}
};
});
Использование:
<form class="form-horizontal" ng-submit="login()" validate-form="" novalidate="">
NB: novalidate=""
используется для блокировки проверки HTML5.
Петрушка требует, чтобы динамически загружаемые формы были инициализированы JavaScript. В этом случае вы захотите сделать это в loginController.js.
Я не смог заставить это работать сам из-за ошибки превышения максимального размера стека вызовов где-то в Parsley. Мне будет любопытно посмотреть, если вы получите ту же ошибку.
Альтернативой является проверка модели. Вы можете добавить $watch
в LoginName
а также LoginPass
определить, являются ли они пустыми, и установить переменные в области видимости (например, LoginNameIsValid
) который вы могли бы в свою очередь использовать, чтобы установить класс с ng-class
, Когда кто-то нажимает кнопку отправки, все, что вам нужно сделать, это проверить флаги действительности.
Я знаю, что это сообщение старое, но подумал, что отвечу, надеясь, что оно кому-нибудь поможет.
Я закончил тем, что делал что-то похожее на @yagudaev, но сделал его немного более общим, чтобы вам не понадобился атрибут петрушки для каждого элемента. Вместо этого это нужно для элемента формы в качестве атрибута. Я также принял во внимание, загружается ли форма динамически, чтобы петрушка все еще могла проверить ее. Это проверено с Parsley 2.x и Angular 1.3.x и 1.4.x.
http://ryanalberts.com/797/parsley-validation-with-angularjs/
Я должен отметить, что в конечном итоге я пошел по пути использования проверки углов с помощью ngMessage, но улучшил его проверку, чтобы разрешить повторное использование сообщений проверки со значениями (т. Е. Значение должно быть между X и Y. X и Y вставляются автоматически), которым является Parsley по сути, намного лучше, чем даже угловое ngMessage, и это новая проверка формы в 1.3+.