AngularJS basic form validation

Question

In my form I want to make sure an email is typed in and that a password is typed in. Is this possible with the angularJS tools out of the box? Here's what I have currently:

<ion-view title="Welcome">
    <ion-content>
        <div class="list">
            <form name="signInForm">

              <label class="item item-input item-stacked-label">
                <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]">
              </label>

              <label class="item item-input item-stacked-label">
                <input ng-model="user.password" type="password" placeholder="password">
              </label>

              {{ signInForm["user.email"] }}
                <button data-ng-click="signInClick()" data-ng-disabled="signInForm.$invalid" class="button button-full button-positive">
                Sign In
                </button>

              <div class="button-bar">
                  <a href="#/sign-up" class="button">Sign Up</a>
                  <a href="#/forgot-password" class="button"><em>Forgot Password</em></a>
                </div>

            </form>
        </div>
    </ion-content>
</ion-view>

My biggest issue is that the button becomes clickable even though there is no password typed in. How can I fix this?

batmaniac7 · Accepted Answer · 2015-04-07 18:50:20Z

1

Use "required" on input fields and the check for form validation.

                <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]" required>

                <input ng-model="user.password" type="password" placeholder="password" required>

answered Apr 7, 2015 at 18:50

batmaniac7

4225 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reptilicus · Accepted Answer · 2015-04-07 18:50:15Z

1

Just put required on the email and password fields

<label class="item item-input item-stacked-label">
  <input name="user.email" data-ng-model="user.email" type="email" placeholder="[email protected]" required>
</label>

<label class="item item-input item-stacked-label">
  <input ng-model="user.password" type="password" placeholder="password" required>
</label>

answered Apr 7, 2015 at 18:50

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Collectives™ on Stack Overflow

AngularJS basic form validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related