angularjs validation issue in a form

Question

I'm trying to do a validation to a form which contains a field called "description" .In that 1.description field cannot be empty 2.description field cannot be less than 5 characters 3.description field cannot exceed 60 characters.

For the validation i have done, if i enter 3 character description it shows both the error messages for the field being empty and field has less than 5 characters.(same happens when exceeding character limit)

Like this

enter image description here

how can i show the correct error message when this happens? i want to show only "Description is too short/long" when character limit is less than 5 or more than 60. And "Description is required" error message when no description is included.

This is what i have done

<!-- DESCRIPTION -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
            <label>Description</label>
            <input type="text" name="username" class="form-control" ng-model="user.username"  ng-minlength="5"  ng-maxlength="60" required>
            <label><p ng-show="userForm.username.$invalid && userForm.username.$dirty && submitted || (userForm.username.$invalid && userForm.username.$pristine) && submitted  " class="help-block "><font color="#009ACD">Description is required.</font></p></label>
            <label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted"  class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
            <label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
        </div>



            <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"  type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
            ng-click="submitted=false" padding-top="true">Reset</button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
            ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
            </div>

GregL · Accepted Answer · 2014-09-29 09:29:32Z

1

You are always seeing the "Description is required" message because you are relying on the userForm.username.$invalid property, which will always be true if any of the validations fail.

Instead, you should change it to be similar to the others and use the userForm.username.$error.required key.

So your first label then becomes:

<label><p ng-show="userForm.username.$error.required && userForm.username.$dirty && submitted || (userForm.username.$error.required && userForm.username.$pristine) && submitted" class="help-block "><font color="#009ACD">Description is required.</font></p></label>

answered Sep 29, 2014 at 9:29

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CraZyDroiD Over a year ago

i tried this way earlier. but when i use that even if the field is empty the error message is shown as "Description is too short"

Vikas Garg · Accepted Answer · 2014-09-29 09:45:08Z

1

@CrazyDroid you can check out this link to have validation on your form which is totally aligned with your requirement.

http://scotch.io/tutorials/javascript/angularjs-form-validation

answered Sep 29, 2014 at 9:45

Vikas Garg

1901 silver badge7 bronze badges

Comments

Fordio · Accepted Answer · 2014-09-29 10:19:57Z

1

Your ng-show expression on the with "Description is required" looks wrong to me. Try simplifying it to:

ng-show="submitted && userForm.username.$error.required"

answered Sep 29, 2014 at 10:19

Fordio

3,8802 gold badges16 silver badges18 bronze badges

Collectives™ on Stack Overflow

angularjs validation issue in a form

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related