AngularJS validation message is not displayed when the field is invalid

Question

I'm using angularJs validation in my html form. I'm using the required validation on an input, and when I erase the value there the textbox gets highlighed in red and trying to submit the pops-out the error 'Please fill out this field' But my custom error message is not displayed. Following is the code.

 <form id="settingsForm" ng-submit="vm.saveSettings()" class="form">
     <td style="width:30%">
          <input class="userInput" name="locationName" style="width:80%" type="text" maxlength="50" data-ng-model="vm.location.locationName" required />
          <label class="validationErrorText" data-ng-show="locationSettingsForm.locationName.$error.required">Location Name Required</label>
    </td>
 </form>

Any idea why this happens? Attached is a screenshot of how its displayed when the field is not filled.

enter image description here

Rajeshwar · Accepted Answer · 2015-02-27 05:40:22Z

I have created a plunker which will help you.

http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF

<form role="form" name="signUpForm" class="form-horizontal">
 <div class="form-group">
    <label for="url" class="col-sm-4 control-label">URL</label>

    <div class="col-sm-8">
      <input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
             ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-@_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">

      <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
          <small class="text-danger">Please enter valid URL.</small>
      </span>
      <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
          <small class="text-danger">URL should have 2 to 25 characters.</small>
      </span>
    </div>
  </div>
</form>

You can use similar validation. The name attribute should match with the condition. Here it is url.

Uluk Biy · Accepted Answer · 2015-02-27 05:31:21Z

1

Add

name="locationSettingsForm"

to the <form> element

answered Feb 27, 2015 at 5:31

Uluk Biy

49.3k13 gold badges148 silver badges156 bronze badges

1 Comment

devC Over a year ago

ohhh... how stupid that I ddnt see it earlier!!! I have given the id instead of name. Thanks!

Collectives™ on Stack Overflow

AngularJS validation message is not displayed when the field is invalid

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related