Home Form validation error, input filed should highlight when error comes
Reply: 0

Form validation error, input filed should highlight when error comes

user1737
1#
user1737 Published in April 26, 2018, 1:44 pm

I have the following HTML code, where if my field is entered some value and erased, I am getting my field highlighted with red and get error message, mobile number is required. But if I type alphabet, I am getting error message, only numbers but the input box is not highlighted as red.

HTML:

<div class="form-group" ng-class="{ 'has-error': ((submitted || cform.ccode1.$dirty || cform.submitted) && cform.ccode1.$invalid) || ((submitted || cform.mobile1.$dirty || cform.submitted) && cform.mobile1.$invalid) }" class="help-block">

    <div class="input-group">
        <div class="input-group-addon" style="width:25%;">
            <input type="text" class="form-control" maxlength="5" placeholder="Code" ng-model="model.ccode1" name="ccode1" ng-pattern="/^[0-9]*$/"
                readdonly required>

        </div>

        <input type="text" class="form-control" placeholder="Mobile" name="mobile1" ng-model="model.mobile1" ng-pattern="/^[0-9]*$/"
            min-length="2 " required>

    </div>
    <span ng-show="cform.ccode1.$dirty && cform.ccode1.$error.required" class="help-block">Code is required</span>
    <span ng-show="cform.mobile1.$dirty && cform.mobile1.$error.required" class="help-block1">Mobile number is required</span>
    <span ng-show="cform.ccode1.$dirty && cform.ccode1.$error.pattern" class="help-block">
        Must contain only numbers </span>
    <span ng-show="cform.mobile1.$dirty && cform.mobile1.$error.pattern" class="help-block1">
        Must contain only numbers </span>

</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.333609 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO