CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Different validation for two buttons in Angularjs?

Hi I have two forms with html controls. Below is my form.

<form name="form3" novalidate>
            <fieldset ng-disabled="employementdetails">
            <div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.Employer.$invalid)  || (form3.Employer.$invalid && form3.Employer.$dirty))}">
                        <div>
                            <span class="ang-error" style="color:#fff" ng-show="form3.Employer.$invalid && form3.Employer.$error.required && form3.Employer.$dirty">*Required</span>
                        </div>
                        <select ng-model="user.Employer" name="Employer" id="Employer" ng-options="user.ID as user.Employer for user in EmployerList" required>
                            <option value="" label="Employer">Employer</option>
                        </select>
                    </div>
           //some other controls
           <div class="button-container">
                        <input type="submit" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotopersonaladdress()">
                        <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveemployementdetails()">
           </div>
          </fieldset>
</form>

Whenever i click on NEXT my validation works fine as required. But when i click on BACK button i do not want to fire any validation and i am scrolling to previous form. This is not happening. On clicking on BACK also my validation is firing. Is there any way i can disable it? Any help would be appreciated. Thank you.

Upvotes: 0

Views: 292

Answers (3)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

The simplest way to skip validation on particular button is to add formnovalidate attribute to it:

<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" 
formnovalidate ng-click="saveemployementdetails()">

Upvotes: 0

Benjamin D.
Benjamin D.

Reputation: 410

The type="submit" in the BACK input makes the form validated automatically. Try to use type="button" instead :

<div class="button-container">
    <input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotopersonaladdress()">
    <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveemployementdetails()">
</div>

Upvotes: 2

Artem Arkhipov
Artem Arkhipov

Reputation: 7455

When you use type="submit" button it means that form is ready to be sent, so all validation should be applied. Use simple type="button" for back button.

Upvotes: 5

Related Questions