0

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>
Shruti
  • 1,554
  • 8
  • 29
  • 66

1 Answers1

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

runTarm
  • 11,537
  • 1
  • 37
  • 37
  • 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 – Shruti Aug 09 '14 at 08:25
  • Do you want to show those error messages only after the button is clicked? – runTarm Aug 09 '14 at 08:30
  • you did n't give answer to this Question .If you know answer please give with plunker http://stackoverflow.com/questions/25215295/how-to-show-html-on-pop-over-using-angular-ui-bootstrap – Shruti Aug 09 '14 at 08:37
  • if you know answer of this Question http://stackoverflow.com/questions/25216011/drag-and-drop-functionality-not-working-angular-js.please post your answer – Shruti Aug 09 '14 at 08:39
  • can we do validation on button click ? – Shruti Aug 09 '14 at 08:48
  • can you please answer of this Question ? – Shruti Aug 09 '14 at 09:17