CODEWITHSUNDEEP
javascripthtmlangularjs
medev21
medev21

Reputation: 3041

how to disable Angular required field msg?

I'm trying to disable this message "Please fill out this field.":

enter image description here

I would like to use my own custom message; I'm suspecting this comes from Angular, but can't seem to disable it. I thought about disabling it through css, but don't know the class or id. I tried to do 'inspect element', but this message goes away when I try.

Here is the html form if it helps.

<form name="personalForm" role="form" ng-submit="updatePersonal(updatePersonalForm)"
          ng-init="updatePersonalForm = {first_name: userFirstName,
            last_name: userLastName, job_title: userJobTitle, company_name: userCompanyName,
            location: userLocation, website: userWebsite}">

            <div class="auth-body">
              <div class="row" style="margin: 0;">
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>first name</label>
                    <input type="text" name="first_name"
                    required class="form-control" ng-model="updatePersonalForm.first_name"
                    ng-class="{ 'error-input': personalForm.first_name.$invalid}">
                  </div>
                </div>
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>last name</label>
                    <input type="text" name="last_name"
                    required class="form-control" ng-model="updatePersonalForm.last_name"
                    ng-class="{ 'error-input': personalForm.last_name.$invalid}">
                  </div>
                </div>
              </div>

              <div class="row" style="margin: 0;">
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>job title</label>
                    <input type="text" name="job_title" ng-model="updatePersonalForm.job_title"
                     class="form-control">
                  </div>
                </div>
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>location</label>
                    <input type="text" name="location" ng-model="updatePersonalForm.location"
                     class="form-control">
                  </div>
                </div>
              </div>

              <div class="row" style="margin: 0;">
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>company name</label>
                    <input type="text" name="company_name" ng-model="updatePersonalForm.company_name"
                     class="form-control">
                  </div>
                </div>
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <div class="form-group personal-form-group">
                    <label>personal website</label>
                    <input type="text" name="personal_website" ng-model="updatePersonalForm.website"
                     class="form-control">
                  </div>
                </div>
              </div>

              <div class="row" style="margin: 0;">
                <div class="col-sm-6 account-input-container" style="padding: 0;">
                  <button type="submit" class="bubble-btn submit-btn pull-left" style="float: none !important;">update</button>
                </div>
              </div>
            </div>
          </form>

I was able to print out these options, but can't seem to find the option for that required msg, maybe it's not even there.

enter image description here

Thanks in advance for your help!

Upvotes: 0

Views: 508

Answers (4)

Muli Yulzary
Muli Yulzary

Reputation: 2569

If you want to disable it for a specific field just take off the required or ng-required directive.

Upvotes: 0

Aruna
Aruna

Reputation: 12022

The above validation is fired by HTML5 and not by AngularJS. You can turn this off by adding the novalidate attribute in yourform as below,

<form novalidate name="personalForm" role="form" ng-submit="updatePersonal(updatePersonalForm)"
          ng-init="updatePersonalForm = {first_name: userFirstName,
            last_name: userLastName, job_title: userJobTitle, company_name: userCompanyName,
            location: userLocation, website: userWebsite}">

</form>

Upvotes: 1

lealceldeiro
lealceldeiro

Reputation: 14958

If you want to set this behavior for all fields inside the form do this:

<form name="formName" novalidate>
    <!-- all fields... -->
</form>

... or... if you want to set that behavior just for specific fields, do the same to those fields. When you set the attribute for a specific field, it overrides the parent form behavior

<form name="formName">
    <label> Enter your text here </label>
    <input type="text" formnovalidate />
</form>

Upvotes: 0

shilpi
shilpi

Reputation: 108

Add novalidate to your form tag. This will prevent default HTML5 validation.

 <form action=" " novalidate>
     //form body
</form>

Upvotes: 0

Related Questions