javascript - Prevent form submission when validation fails (Angular Material) - Stack Overflow

admin管理员组

文章数量:1395785

I just discovered Angular and Material design, and I really love all the features that e out of the box. I created a contact form with validation, which gives error messages when a field is required or is put in the incorrect format. The only thing that is missing is that when the user clicks the "submit" button, they can still send the form to the server. So the error messages don't really help.

HTML:

<md-content layout-padding="">
  <form name="projectForm" action="/" method="post" novalidate>
    <div layout-gt-sm="row">
      <md-input-container class="md-block" flex-gt-sm="">
        <label>Email</label>
        <input required="" type="email" name="emailAddress" ng-model="project.emailAddress" ng-pattern="/^.+@.+\..+$/">
        <div ng-messages="projectForm.emailAddress.$error" role="alert">
          <div ng-message-exp="['required', 'pattern']">
        Your email must be in correct format and look like an email address.
      </div>
    </div>
  </md-input-container>
</div>
<md-input-container class="md-block">
  <label>Message</label>
  <textarea required="" name="content" md-maxlength="50" ng-model="project.content" rows="3" md-select-on-focus=""></textarea>
  <div ng-messages="projectForm.content.$error" role="alert">
    <div ng-message="required">
      Your must enter a message.
    </div>
  </div>
</md-input-container>
<md-button type="submit" class="submit">Submit</md-button>

JS:

angular
  .module('toast', ['ngMaterial', 'ngMessages'])
  .controller('formCtrl', function($scope) {
    $scope.project = {
      //scope stuff goes here
    };
  })

Here is the Codepen.

I just discovered Angular and Material design, and I really love all the features that e out of the box. I created a contact form with validation, which gives error messages when a field is required or is put in the incorrect format. The only thing that is missing is that when the user clicks the "submit" button, they can still send the form to the server. So the error messages don't really help.

HTML:

<md-content layout-padding="">
  <form name="projectForm" action="/" method="post" novalidate>
    <div layout-gt-sm="row">
      <md-input-container class="md-block" flex-gt-sm="">
        <label>Email</label>
        <input required="" type="email" name="emailAddress" ng-model="project.emailAddress" ng-pattern="/^.+@.+\..+$/">
        <div ng-messages="projectForm.emailAddress.$error" role="alert">
          <div ng-message-exp="['required', 'pattern']">
        Your email must be in correct format and look like an email address.
      </div>
    </div>
  </md-input-container>
</div>
<md-input-container class="md-block">
  <label>Message</label>
  <textarea required="" name="content" md-maxlength="50" ng-model="project.content" rows="3" md-select-on-focus=""></textarea>
  <div ng-messages="projectForm.content.$error" role="alert">
    <div ng-message="required">
      Your must enter a message.
    </div>
  </div>
</md-input-container>
<md-button type="submit" class="submit">Submit</md-button>

JS:

angular
  .module('toast', ['ngMaterial', 'ngMessages'])
  .controller('formCtrl', function($scope) {
    $scope.project = {
      //scope stuff goes here
    };
  })

Here is the Codepen.

• javascript
• html
• angularjs
• forms

Share Improve this question Follow asked Apr 9, 2016 at 2:18 cmelonecmelone 6922 silver badges1111 bronze badges 2

• Just disable the submit button when the form is not valid. – Lex Commented Apr 9, 2016 at 2:24
• How would I do that? Wouldn't the user still be able to press enter and submit the form? – cmelone Commented Apr 9, 2016 at 2:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Disable the submit button when the form is invalid:

<md-button type="submit" class="submit" ng-disabled="projectForm.$invalid">Submit</md-button>

This you can try

For angular latest you can validate your form in type script using simple below code

Suppose your form looks like this

<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">

you can validate its state like

 if (!this.userForm.valid) {
    return;
  }

you can use also add [disabled]="projectForm.$invalid" to: Submit

本文标签： javascriptPrevent form submission when validation fails (Angular Material)Stack Overflow