検証が失敗した場合にフォームの提出を防止する（角材）

Question

角度と材質のデザインを発見したばかりで、箱から出てくるすべての機能が大好きです。検証が必要な連絡先フォームを作成しました。これはフィールドが必要なとき、または間違った形式で入力されたときにエラーメッセージを表示します。欠落しているのは、ユーザーが[送信]ボタンをクリックしても、フォームをサーバーに送信できることです。したがって、エラーメッセージは実際には役に立ちません。

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 
    }; 
    }) 

はCodepenです。

Answer 1

フォームが無効である場合、送信ボタンを無効にします。

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