diff --git a/app/settings/account-info/account-info.jade b/app/settings/account-info/account-info.jade index 0eae9a722..48af93d71 100644 --- a/app/settings/account-info/account-info.jade +++ b/app/settings/account-info/account-info.jade @@ -95,9 +95,13 @@ placeholder="123 Topcoder Ave.", value="{{vm.homeAddress.streetAddr1}}", ng-model="vm.homeAddress.streetAddr1", - ng-class="{'form-field-focused': hasFocus==true}" + ng-class="{'form-field-focused': hasFocus==true}", + ng-required="vm.addressDirty = vm.accountInfoForm.address.$dirty || vm.accountInfoForm.city.$dirty || vm.accountInfoForm.state.$dirty || vm.accountInfoForm.zipcode.$dirty || vm.accountInfoForm.country.$dirty" ) + .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.address.$invalid") + p(ng-show="vm.accountInfoForm.address.$error.required") Please enter an address + .form-label Address 2 span(style="text-transform: none;")  (opt., suite, etc.) input.form-field( @@ -115,27 +119,39 @@ value="{{vm.homeAddress.city}}", placeholder="Best City in the World", ng-model="vm.homeAddress.city", - ng-class="{'form-field-focused': hasFocus==true}" + ng-class="{'form-field-focused': hasFocus==true}", + ng-required="vm.addressDirty" ) + .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.city.$invalid") + p(ng-show="vm.accountInfoForm.city.$error.required") Please enter a city + .form-label State/Province input.form-field( name="state", type="text", value="{{vm.homeAddress.stateCode}}", placeholder="California", ng-model="vm.homeAddress.stateCode", - ng-class="{'form-field-focused': hasFocus==true}" + ng-class="{'form-field-focused': hasFocus==true}", + ng-required="vm.addressDirty" ) + .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.state.$invalid") + p(ng-show="vm.accountInfoForm.state.$error.required") Please enter a state or province + .form-label Zip input.form-field( name="zipcode", type="text", placeholder="Zip" value="{{vm.homeAddress.zip}}", ng-model="vm.homeAddress.zip", - ng-class="{'form-field-focused': hasFocus==true}" + ng-class="{'form-field-focused': hasFocus==true}", + ng-required="vm.addressDirty" ) + .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.zipcode.$invalid") + p(ng-show="vm.accountInfoForm.zipcode.$error.required") Please enter a zip + .form-label Country angucomplete-alt( input-name="country", @@ -148,9 +164,10 @@ title-field="name", match-class="angucomplete-highlight", minlength="1", - ng-class="{'form-field-focused': hasFocus==true}" + ng-class="{'form-field-focused': hasFocus==true}", + field-required="vm.addressDirty" ) - .account-info-error(ng-show="vm.accountInfoForm.country.$invalid") + .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.country.$error.required") p(ng-show="vm.accountInfoForm.country.$error.required") Please choose a country from the list. diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss index 4cf1db0ad..995135546 100644 --- a/assets/css/settings/account-info.scss +++ b/assets/css/settings/account-info.scss @@ -4,6 +4,10 @@ .account-info-container { padding-bottom: 75px; + .account-info-error { + color: #ef3a3a; + } + .section-fields { margin-top: 20px; }