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