validation issue using angular js (red border display on firefox)?

Question

I make a simple form from object ..now i validate that form .I am facing few issues while validation.please check this on firefox..

http://plnkr.co/edit/CFUR2mgVv4hzXPF7AR9y?p=preview

My field become red (red border on input field)when i write required true and display message "please enter the valid email" after run app.it should become red when user move focus one field to another.and i need to display two message "please enter the email" with "please enter the valid email" how I can do that ?

I study lot of tutorial but I apply this thing $dirty , $pristine but nothing works for me.. I study from there validation .. http://scotch.io/tutorials/javascript/angularjs-form-validation

<ul ng-repeat="input in inputs">
        <li><span>{{input.name}} : </span>

            <div ng-switch="input.type" ng-form="myfrm">
                <div ng-switch-when="text">
                    <input type="text" ng-model="outputs[input.name]"/>
                </div>
                <div ng-switch-when="email" class="form-group" >
                    <input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required">
                    <P ng-show="myfrm.input.$invalid  && !myform.input.$pristine">Please enter a valid email</P>


                </div>
                <div ng-switch-when="number">
                    <input type="number" ng-model="outputs[input.name]"  ng-required="input.required" name="input"/>
                     <P ng-if="myfrm.input.$invalid">Please enter a valid number</P>
                </div>
                <div ng-switch-when="url">
                    <input type="number" ng-model="outputs[input.name]"/>
                </div>
                <div ng-switch-when="checkbox">
                    <input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/>
                </div>
            </div>
        </li>
    </ul>

runTarm · Accepted Answer · 2014-08-09 08:17:24Z

1

There is a typo where you use $pristine, the myform should be myfrm like you set in ng-form:

<p ng-show="myfrm.input.$invalid && !myfrm.input.$pristine">Please enter a valid email</p>

To show different messages for invalid email and empty email, you could use $error instead of $invalid like this:

<p ng-show="myfrm.input.$error.email && !myfrm.input.$pristine">Please enter a valid email</p>
<p ng-show="myfrm.input.$error.required && !myfrm.input.$pristine">Please enter the email</p>

Example Plunker: http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview

answered Aug 9, 2014 at 8:17

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

6 Comments

Shruti Over a year ago

thanks I am looking for same answer .But if I want this on button click mean I a make a button below the field and check validation in button click how I do that

runTarm Over a year ago

Do you want to show those error messages only after the button is clicked?

Shruti Over a year ago

you did n't give answer to this Question .If you know answer please give with plunker stackoverflow.com/questions/25215295/…

Shruti Over a year ago

if you know answer of this Question stackoverflow.com/questions/25216011/… post your answer

Shruti Over a year ago

can we do validation on button click ?

|

Collectives™ on Stack Overflow

validation issue using angular js (red border display on firefox)?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related