Closes #131: validate only dirty forms

This commit is contained in:
bgamard 2017-11-03 11:05:04 +01:00
parent 14b4e5aeec
commit 18f37ec2a8
8 changed files with 43 additions and 37 deletions

View File

@ -54,6 +54,9 @@ angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $
language: 'fra' language: 'fra'
}; };
$scope.newFiles = []; $scope.newFiles = [];
if ($scope.form) {
$scope.form.$setPristine();
}
}; };
/** /**

View File

@ -261,7 +261,7 @@
"account": { "account": {
"password": "Mot de passe", "password": "Mot de passe",
"password_confirm": "Mot de passe (confirmation)", "password_confirm": "Mot de passe (confirmation)",
"updated": "Compte mis à jout avec succès" "updated": "Compte mis à jour avec succès"
}, },
"config": { "config": {
"title_guest_access": "<small>Accès</small> invité", "title_guest_access": "<small>Accès</small> invité",

View File

@ -9,7 +9,7 @@
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
<form name="documentForm" class="form-horizontal"> <form name="documentForm" class="form-horizontal">
<div class="pull-right btn-group"> <div class="pull-right btn-group" ng-init="form = documentForm">
<button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()"> <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">
<span class="glyphicon glyphicon-floppy-disk"></span> <span class="glyphicon glyphicon-floppy-disk"></span>
{{ 'save' | translate }} {{ 'save' | translate }}
@ -21,7 +21,7 @@
<fieldset> <fieldset>
<legend>{{ 'document.edit.primary_metadata' | translate }}</legend> <legend>{{ 'document.edit.primary_metadata' | translate }}</legend>
<div class="form-group" ng-class="{ 'has-error': !documentForm.title.$valid }"> <div class="form-group" ng-class="{ 'has-error': !documentForm.title.$valid && documentForm.$dirty }">
<label class="col-sm-2 control-label" for="inputTitle">{{ 'document.title' | translate }}</label> <label class="col-sm-2 control-label" for="inputTitle">{{ 'document.title' | translate }}</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input required ng-maxlength="100" class="form-control" type="text" id="inputTitle" <input required ng-maxlength="100" class="form-control" type="text" id="inputTitle"

View File

@ -1,19 +1,19 @@
<h1>User <small>account</small></h1> <h1>User <small>account</small></h1>
<form class="form-horizontal" name="editUserForm" novalidate> <form class="form-horizontal" name="editUserForm" novalidate>
<div class="form-group" ng-class="{ 'has-error': !editUserForm.password.$valid, success: editUserForm.password.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editUserForm.password.$valid && editUserForm.$dirty, success: editUserForm.password.$valid }">
<label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.account.password' | translate }}</label> <label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.account.password' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="password" type="password" id="inputPassword" required class="form-control" <input name="password" type="password" id="inputPassword" required class="form-control"
ng-minlength="8" ng-maxlength="50" placeholder="{{ 'settings.account.password' | translate }}" ng-model="user.password" /> ng-minlength="8" ng-maxlength="50" placeholder="{{ 'settings.account.password' | translate }}" ng-model="user.password" />
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.password.$error.required">{{ 'validation.required' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
<span class="help-block" ng-show="editUserForm.password.$error.minlength">{{ 'validation.too_short' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
<span class="help-block" ng-show="editUserForm.password.$error.maxlength">{{ 'validation.too_long' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
</div> </div>
</div> </div>
<div class="form-group" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid, success: editUserForm.passwordconfirm.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid && editUserForm.$dirty, success: editUserForm.passwordconfirm.$valid }">
<label class="col-sm-2 control-label" for="inputPasswordConfirm">{{ 'settings.account.password_confirm' | translate }}</label> <label class="col-sm-2 control-label" for="inputPasswordConfirm">{{ 'settings.account.password_confirm' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="passwordconfirm" type="password" id="inputPasswordConfirm" required class="form-control" <input name="passwordconfirm" type="password" id="inputPasswordConfirm" required class="form-control"
@ -21,7 +21,7 @@
placeholder="{{ 'settings.account.password_confirm' | translate }}" ng-model="user.passwordconfirm" /> placeholder="{{ 'settings.account.password_confirm' | translate }}" ng-model="user.passwordconfirm" />
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator">{{ 'validation.password_confirm' | translate }}</span> <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator && editUserForm.$dirty">{{ 'validation.password_confirm' | translate }}</span>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
<h2 ng-show="!isEdit()" translate="settings.group.edit.add_group_title"></h2> <h2 ng-show="!isEdit()" translate="settings.group.edit.add_group_title"></h2>
<form class="form-horizontal" name="editGroupForm" novalidate> <form class="form-horizontal" name="editGroupForm" novalidate>
<div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid, success: editGroupForm.name.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid && editGroupForm.$dirty, success: editGroupForm.name.$valid }">
<label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.name' | translate }}</label> <label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.name' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="name" type="text" id="inputName" required class="form-control" <input name="name" type="text" id="inputName" required class="form-control"
@ -13,21 +13,23 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editGroupForm.name.$error.required">{{ 'validation.required' | translate }}</span> <span class="help-block" ng-show="editGroupForm.name.$error.required && editGroupForm.$dirty">{{ 'validation.required' | translate }}</span>
<span class="help-block" ng-show="editGroupForm.name.$error.minlength">{{ 'validation.too_short' | translate }}</span> <span class="help-block" ng-show="editGroupForm.name.$error.minlength && editGroupForm.$dirty">{{ 'validation.too_short' | translate }}</span>
<span class="help-block" ng-show="editGroupForm.name.$error.maxlength">{{ 'validation.too_long' | translate }}</span> <span class="help-block" ng-show="editGroupForm.name.$error.maxlength && editGroupForm.$dirty">{{ 'validation.too_long' | translate }}</span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.parent_group' | translate }}</label> <label class="col-sm-2 control-label" for="inputParent">{{ 'settings.group.edit.parent_group' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="name" type="text" id="inputParent" class="form-control" autocomplete="off" <input name="parent" type="text" id="inputParent" class="form-control" autocomplete="off"
placeholder="{{ 'settings.group.edit.search_group' | translate }}" ng-model="group.parent" placeholder="{{ 'settings.group.edit.search_group' | translate }}" ng-model="group.parent"
typeahead="group for group in getGroupTypeahead($viewValue)" typeahead="group for group in getGroupTypeahead($viewValue)"
typeahead-wait-ms="200" typeahead-editable="false" /> typeahead-wait-ms="200" typeahead-editable="false" />
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editGroupForm.$valid"> <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editGroupForm.$valid">

View File

@ -5,7 +5,7 @@
<h2 ng-show="!isEdit()" translate="settings.user.edit.add_user_title"></h2> <h2 ng-show="!isEdit()" translate="settings.user.edit.add_user_title"></h2>
<form class="form-horizontal" name="editUserForm" novalidate> <form class="form-horizontal" name="editUserForm" novalidate>
<div class="form-group" ng-class="{ 'has-error': !editUserForm.username.$valid, success: editUserForm.username.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editUserForm.username.$valid && editUserForm.$dirty, success: editUserForm.username.$valid }">
<label class="col-sm-2 control-label" for="inputUsername">{{ 'settings.user.edit.username' | translate }}</label> <label class="col-sm-2 control-label" for="inputUsername">{{ 'settings.user.edit.username' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="username" type="text" id="inputUsername" required ng-disabled="isEdit()" class="form-control" <input name="username" type="text" id="inputUsername" required ng-disabled="isEdit()" class="form-control"
@ -13,24 +13,24 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.username.$error.required">{{ 'validation.required' | translate }}</span> <span class="help-block" ng-show="editUserForm.username.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
<span class="help-block" ng-show="editUserForm.username.$error.minlength">{{ 'validation.too_short' | translate }}</span> <span class="help-block" ng-show="editUserForm.username.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
<span class="help-block" ng-show="editUserForm.username.$error.maxlength">{{ 'validation.too_long' | translate }}</span> <span class="help-block" ng-show="editUserForm.username.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
</div> </div>
</div> </div>
<div class="form-group" ng-class="{ 'has-error': !editUserForm.email.$valid, success: editUserForm.email.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editUserForm.email.$valid && editUserForm.$dirty, success: editUserForm.email.$valid }">
<label class="col-sm-2 control-label" for="inputEmail">{{ 'settings.user.edit.email' | translate }}</label> <label class="col-sm-2 control-label" for="inputEmail">{{ 'settings.user.edit.email' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="email" type="email" id="inputEmail" required class="form-control" <input name="email" type="email" id="inputEmail" required class="form-control"
ng-minlength="1" ng-maxlength="100" placeholder="{{ 'settings.user.edit.username' | translate }}" ng-model="user.email"/> ng-minlength="1" ng-maxlength="100" placeholder="{{ 'settings.user.edit.email' | translate }}" ng-model="user.email"/>
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.email.$error.required">{{ 'validation.required' | translate }}</span> <span class="help-block" ng-show="editUserForm.email.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
<span class="help-block" ng-show="editUserForm.email.$error.email">{{ 'validation.email' | translate }}</span> <span class="help-block" ng-show="editUserForm.email.$error.email && editUserForm.$dirty">{{ 'validation.email' | translate }}</span>
<span class="help-block" ng-show="editUserForm.email.$error.minlength">{{ 'validation.too_short' | translate }}</span> <span class="help-block" ng-show="editUserForm.email.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
<span class="help-block" ng-show="editUserForm.email.$error.maxlength">{{ 'validation.too_long' | translate }}</span> <span class="help-block" ng-show="editUserForm.email.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
</div> </div>
</div> </div>
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="form-group" ng-class="{ 'has-error': !editUserForm.storage_quota.$valid, success: editUserForm.storage_quota.$valid }"> <div class="form-group" ng-class="{ 'has-error': !editUserForm.storage_quota.$valid && editUserForm.$dirty, success: editUserForm.storage_quota.$valid }">
<label class="col-sm-2 control-label" for="inputQuota">{{ 'settings.user.edit.storage_quota' | translate }}</label> <label class="col-sm-2 control-label" for="inputQuota">{{ 'settings.user.edit.storage_quota' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<div class="input-group"> <div class="input-group">
@ -55,11 +55,12 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.storage_quota.$error.pattern">{{ 'validation.number' | translate }}</span> <span class="help-block" ng-show="editUserForm.storage_quota.$error.pattern && editUserForm.$dirty">{{ 'validation.number' | translate }}</span>
</div> </div>
</div> </div>
<div class="form-group" ng-if="user.username != 'guest'" ng-class="{ 'has-error': !editUserForm.password.$valid, success: editUserForm.password.$valid }"> <div class="form-group" ng-if="user.username != 'guest'"
ng-class="{ 'has-error': !editUserForm.password.$valid && editUserForm.$dirty, success: editUserForm.password.$valid }">
<label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.user.edit.password' | translate }}</label> <label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.user.edit.password' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="password" type="password" id="inputPassword" ng-required="!isEdit()" class="form-control" <input name="password" type="password" id="inputPassword" ng-required="!isEdit()" class="form-control"
@ -67,13 +68,14 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.password.$error.required">{{ 'validation.required' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
<span class="help-block" ng-show="editUserForm.password.$error.minlength">{{ 'validation.too_short' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
<span class="help-block" ng-show="editUserForm.password.$error.maxlength">{{ 'validation.too_long' | translate }}</span> <span class="help-block" ng-show="editUserForm.password.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
</div> </div>
</div> </div>
<div class="form-group" ng-if="user.username != 'guest'" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid, success: editUserForm.passwordconfirm.$valid }"> <div class="form-group" ng-if="user.username != 'guest'"
ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid && editUserForm.$dirty, success: editUserForm.passwordconfirm.$valid }">
<label class="col-sm-2 -label" for="inputPasswordConfirm">{{ 'settings.user.edit.password_confirm' | translate }}</label> <label class="col-sm-2 -label" for="inputPasswordConfirm">{{ 'settings.user.edit.password_confirm' | translate }}</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input name="passwordconfirm" type="password" id="inputPasswordConfirm" ng-required="!isEdit()" class="form-control" <input name="passwordconfirm" type="password" id="inputPasswordConfirm" ng-required="!isEdit()" class="form-control"
@ -82,7 +84,7 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator">{{ 'validation.password_confirm' | translate }}</span> <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator && editUserForm.$dirty">{{ 'validation.password_confirm' | translate }}</span>
</div> </div>
</div> </div>

View File

@ -2,13 +2,13 @@
<div class="col-md-4"> <div class="col-md-4">
<div class="well"> <div class="well">
<form name="tagForm" novalidate> <form name="tagForm" novalidate>
<p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid }"> <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
<span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span> <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
<input type="text" name="name" placeholder="{{ 'tag.new_tag' | translate }}" class="form-control" <input type="text" name="name" placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }"> ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
<span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span> <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
</p> </p>
<span class="help-block" ng-show="tagForm.name.$error.space">{{ 'validation.no_space' | translate }}</span> <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
</form> </form>
<p class="input-group"> <p class="input-group">

View File

@ -308,5 +308,4 @@ input[readonly].share-link {
left: 0; left: 0;
right: 0; right: 0;
z-index: 99999; z-index: 99999;
} }