CODEWITHSUNDEEP
angularjsvalidation
devC
devC

Reputation: 1444

AngularJS validation message is not displayed when the field is invalid

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

Upvotes: 0

Views: 2126

Answers (2)

Rajeshwar
Rajeshwar

Reputation: 2509

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.

Upvotes: 2

Uluk Biy
Uluk Biy

Reputation: 49185

Add

name="locationSettingsForm"

to the <form> element

Upvotes: 1

Related Questions