Angularjs multiple validations on same textbox

Question

Hi I am developing angularjs application. I have textbox and i have custom directive attached to it. It should accept certain range of numbers for example between 100 to 200. It is working fine. Along with these validation i want required field validator on submitting form. At a time only one validation should be displayed. Below is my textbox.

<div class="inputblock" ng-class="{ 'has-error' : ((form5.$submitted && form5.rangeNumber.$invalid )|| (form5.rangeNumber.$invalid && form5.rangeNumber.$dirty))}">
    <label class="inputblock-label">{{'Down Payment' | translate}}</label>
    <div>
        <span class="ang-error" style="color:#fff" ng-show="form5.rangeNumber.$dirty && form5.rangeNumber.$invalid">
                                     <span ng-show="!(form5.$submitted && form5.rangeNumber.$error.required)&&form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">
                                         {{ 'Value should be between' | translate }} {{min}} {{'and' | translate}} {{max}}
                                     </span>
        </span>
    </div>
    <input class="" type="text" name="rangeNumber" ng-attr-placeholder="{{ 'DownPayment' }}" ng-model="DownPayment" range-number="range" required>
</div>

May i know if this can be done?

You can use ng-minlength and ng-maxlength to validate range instead of custom directive — Vivz
– Vivz, Commented Jul 19, 2017 at 13:36
Thank you. I already have directive and it is working as expected. — Niranjan Godbole
– Niranjan Godbole, Commented Jul 19, 2017 at 13:37
i am able to display only directive error. I have attached error. whenever i select on submit form i want to display required and when the user clicks on textbox then the range message should be displayed. — Niranjan Godbole
– Niranjan Godbole, Commented Jul 19, 2017 at 13:41
So you want to display required error if the above field is empty on submitting of form? — Vivz
– Vivz, Commented Jul 19, 2017 at 13:51

Vivz · Accepted Answer · 2017-07-20 04:57:52Z

1

The below is for directives error.

   <span ng-show="form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">
        {{ 'Value should be between' | translate }} {{min}} {{'and' | translate}} {{max}}</span>
       </span>

The required error on submitting

<span ng-show="form5.$submitted && form5.rangeNumber.$error.required">
          Required*
</span>

Combination to avoid both coming together

   <span ng-show="!(form5.$submitted && form5.rangeNumber.$error.required)&&form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">
        {{ 'Value should be between' | translate }} {{min}} {{'and' | translate}} {{max}}</span>
       </span>

edited Jul 20, 2017 at 4:57

answered Jul 19, 2017 at 14:01

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

9 Comments

Niranjan Godbole Over a year ago

Thank you.I left office now. Tom I will test

Vivz Over a year ago

Okay. let me know if there is any problem

Niranjan Godbole Over a year ago

Hi Vivz. Hope you are doing good. I applied validation but it is overlapping. I have attached screen shot.

Niranjan Godbole Over a year ago

Its working but whenever i enter some invalid number then if i click on submit and come back to textbox and if i clear i get red colour without any text. i have updated my code and picture.

Vivz Over a year ago

It is because your ng-class is evaluating to true

|

Collectives™ on Stack Overflow

Angularjs multiple validations on same textbox

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related