form validation angularjs without submit button

Question

I want validation of the form which do not have the submit button.

    <div ng-controller="UserCreationCtrl">
        <form novalidate="novalidate" class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputUserLogin">User Login:</label>

                <div class="controls">
                    <input type="email" id="inputUserLogin" ng-model="user.userLogin" placeholder="User Login" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputFirstName">First name:</label>

                <div class="controls">
                    <input type="text" id="inputFirstName" ng-model="user.firstName" placeholder="First name"/>
                </div>
            </div>

            <div>
                <span  class="nullable">
                    <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
                        <option value="">-- choose speciality --</option>
                    </select>
                </span>
            </div>
            <div> some extra other fields goes here</div>
            <div class="control-group">
                <div class="controls">
                    <a ng-click="cancel()" class="btn btn-info btn-xs">cancel</a>
                    <a ng-click="createNewUser()" class="btn btn-small btn-primary">create new user</a>
                </div>
            </div>

        </form>
    </div>

How to make the userlogin(email), firstname and the speciality fields as mandatory, email field must be validated as email. Usually how do we do the validation of the form which do not have the submit button. I.e when I click on the 'create new user' link the form should be validated.

When the errors occured after clicking the link, the form should have correct fields data and it should display only the error messages beside the error fields or display with a field with a red color.

Can we do the client side validation of the form in the html itself without the controllers?

Thanks

Answer 1

Use in $formName.$valid All necessary input fields need required attribute.

<form novalidate="novalidate" class="form-horizontal" name='myForm'>
 <a ng-click="createNewUser()" class="btn btn-small btn-primary" ng-disabled="!myForm.$valid">create new user</a>
</form>

http://plnkr.co/edit/6zVqTeW1WARIUcbS7dC9?p=preview

Answer 2

To answer your questions:

• mandatory fields are assessed using the "required" attribute (HTML5).
• email fields are assessed using the type "email" (HTML5).
• you can submit with a "submit" type button or with an "ng-click" directive, either.
• in AngularJS custom validation should be done using directives (see docs).
• here you have an example of custom validation:

---

<form name="form" class="css-form" novalidate>
  <div>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}<br />
    <span ng-show="form.size.$error.integer">This is not valid integer!</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">
      The value must be in range 0 to 10!</span>
  </div>

  <div>
    Length (float):
    <input type="text" ng-model="length" name="length" smart-float />
    {{length}}<br />
    <span ng-show="form.length.$error.float">
      This is not a valid float number!</span>
  </div>
</form>

Answer 3

<form name="form_validation" ng-submit="form_validation.$valid && submit()" novalidate> <div ng-show="form_validation.$submitted || form_validation.to_address.$touched">
   <div class="alert alert-warning" ng-show="form_validation.to_address.$error.required || form_validation.to_address.$error.email"><a href="#" class="close" data-dismiss="alert">&times;</a>Enter valid Email Addresses.</div>
 </div>
 <div class="form-group">
    <label for="ToAddress"> To Address: </label>
    <input type="email" name="to_address" id="to_address" class="form-control" ng-model="user.to_address" ng-required="true"/>
</div>

try this above, http://www.drtuts.com/handle-form-using-angularjs/