AngularJS form validation: indicate required fields to user

angularjs form validation on submit
angularjs form validation in controller
angularjs form validation error message
angularjs custom validation
angularjs form validation on button click
angularjs form validation on submit example
angularjs reset form
angularjs reset form validation

I would like my form labels to display a red asterisk next to the label when the corresponding form control has a required attribute.

Instead of hard coding the asterisk, I desire a way to append the asterisk to the label dynamically during page load if the label's corresponding input, select or textarea is required (the element the label corresponds to).

I created the directive below, and the directive works. But is there a better, more native way to accomplish my goal? This directive finds all the div.form-group containers and adds a red * character after the label if the corresponding form control inside the div.form-group has a required attribute.

myApp.directive('labelsRequired',function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs){
            elem.find('div.form-group').each(function(i, formGroup){
                var formControls = $(formGroup).find('input, select, textarea');
                console.log(formControls)
                if (0 !== formControls.length && undefined !== $(formControls[0]).attr('required')){
                    jLabel = $(formGroup).find('label');
                    jLabel.html(jLabel.html()+ "<span class='red-color'>*</span>");
                }
            })
        }
    }
});

The directive assumes all inputs, selects, and textareas are inside a div.form-group container.

<div class='form-group'>
  <label>First Name</label><!-- this label gets an asterisk -->
  <input name='fname' required />
</div>
<div class='form-group'>
  <label>Favorite Food</label><!-- this label does not get an asterisk -->
  <input name='favFood'  />
</div>

Building off of Corey's answer:

I just used compile rather than link, as I saw that my required attribute was not being applied to my input elements. I also included a select tag for any dropdowns that I had.

    app.directive('inputRequired', function () {
    return {
        restrict: 'A',
        compile: function (elem) {
            elem.find('label').append("<sup><i class='fa fa-asterisk'></i></sup>");
            elem.find('input').attr('required', 'required');
            elem.find('select').attr('required', 'required');
        }
    };
});

Forms, Form and controls provide validation services, so that the user can be notified of The value of ngModel won't be set unless it passes validation for the input field. required="" /> I agree: </label> <input ng-show="user.agree" type="text"  AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not. You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

You don't need a directive, there are built-in form properties you can use with filters like ng-show, look:

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="userForm" novalidate>
        <div class='form-group'>
          <label>First Name</label>
          <input name='fname' ng-model="fname" required />
          <label ng-show="userForm.fname.$dirty && userForm.fname.$error.required">* Required field</label>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

If you define an ng-model for the input you can deal with it looking if it is filled or not. You can also check it only after the user "dirty" it with userForm.fname.$dirty, so the label will be shown only after a user try to input something but then clear it. Try playing with it here JSFiddle

ngRequired, Show / Hide Table of Contents. ng ngRequired adds the required validator to ngModel . It is most often used for input and select controls, but can also be applied to custom controls. The directive sets the A special directive for setting required is necessary because we cannot use interpolation inside required . See the  Enhanced form validation with ng-messages While the user is entering data, it's helpful to show a message informing him of the next step in the validation process, for example: first show that a field is required when the user starts typing, show a message indicating the minimum length

If you're not using the built-in Angular validation, you could restructure your directive and attach it to your .form-group element. Like this:

app.directive('inputRequired', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attr) {
      elem.find('label').append('<span>*</span>');
      elem.find('input').attr('required', 'required');
    }
  };
});

Your HTML would then look like:

<div class="form-group" input-required>
  <label>Name</label>
  <input name="name" />
</div>
<div class="form-group">
  <label>Food</label>
  <input name="food" />
</div>

However, if you haven't looked into the built-in validation with Angular, I would recommend using it.

Angular Validation, AngularJS offers client-side form validation. AngularJS monitors Required. Use the HTML5 attribute required to specify that the input field must be filled out:  By default Angular provides some directives for input validation (like required, pattern, min, max etc.). If these directives doesn't suffice, custom validation is available. To be able to do that, the directive requires the model used for validation, then it can set the validity of the element like below: .directive('myValidate',

This might come too late and it might not be too elegant but it works, if anyone needs it:

<label ng-show="userForm.fname.$validators.hasOwnProperty('required')">* Required field</label>

AngularJS Form Validation ― Scotch.io, See the Pen AngularJS Form Validation by Chris Sevilleja Form submit is disabled if the form isn't valid; Show a required or invalid Angular provides many validation rules that we can use in addition to This means that our name input field is required and our email input field requires a valid email. using angularjs form validation we can validate a form at the client side. angular gives you the functionality to validate the controls of the form according to requirement.

AngularJS Form Validations with Examples, We will see how to use these classes with AngularJs Form Input Fields Validation class="error" ng-show="personForm.name. error.required">​Required number! In our form, Some fields are required, for the title we will use minimum length 10, and for the color we will use the pattern for the alphabets only. For price we will use the minimum value validation. We can apply the validators by adding attributes to the template, or by adding validators in form model.

Validating User Input on a Form in Angular JS, You have a registration form with three fields with the following restrictions. Here we've created the Add user form shown above using the mark We are applying all the required user validation using the HTML 5 validations  To add validation to a template-driven form, you add the same validation attributes as you would with native HTML form validation. Angular uses directives to match these attributes with validator functions in the framework.

Validation and Error Handling in AngularJS Applications, Validating user input and showing errors - is one of the most common WEB app features error handling and common validation rules (e.g. required ) must work in smart manner (e.g. do not show errors on untouched controls and fields, etc.)​  AngularJS Applications are facilitated to create a form that enriches data binding and validation of input controls. see link how to setup angularJs application The application form is a collection of controls for the purpose of grouping related controls together. follow some of the input controls are used in AngularJS forms:

Comments
  • This requires you to include input-required on every field. My solution only requires one directive for the form.
  • I want to communicate the required to the user before the error occurs. A form should communicate required fields prior to errors happening, in my UX opinion.
  • I am using the angular native form validation. The purpose of the directive is only to put the asterisk on the label in a way which corresponds to the existence or presence of the required attribute. I'll edit to be more clear.