javascript - angularjs で送信時に検証エラー メッセージを表示する

Question

送信をクリックした場合に検証エラー メッセージを表示する必要があるフォームがあります。

ここに働くプランカーがあります

 <form name="frmRegister" ng-submit="register();" novalidate>
      <div>
        <input placeholder="First Name" name="first_name" type="text" ng-model="user.firstName" required />
        <span ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
      </div>
      <div>
        <input placeholder="Last Name" name="last_name" type="text" ng-model="user.lastName" required />
        <span ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
      </div>
      <div>
        <input placeholder="Email" name="email" type="email" ng-model="user.email" required />
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
      </div>
      <input type="submit" value="Save" />
      <span ng-show="registered">YOU ARE NOW REGISTERED USER</span>
 </form>

ユーザーが変更を開始すると、検証は正常に機能します。ただし、何も入力せずに送信をクリックした場合、エラーメッセージは表示されません。

これを達成する考えはありますか？または、他の方法で、[送信] ボタンをクリックしたときに各入力フィールドを $dirty にするにはどうすればよいですか?

Answer 1

このフィドルhttp://jsfiddle.net/thomporter/ANxmv/2/を見つけました。これは、コントロールの検証を引き起こすための巧妙なトリックです。

基本的に、スコープ メンバーsubmittedを宣言し、送信をクリックすると true に設定されます。モデル エラー バインディングは、この追加の式を使用して、次のようなエラー メッセージを表示します。

submitted && form.email.$error.required

---

アップデート

@Hafezのコメントで指摘されているように(彼に賛成票を投じてください!)、 Angular 1.3+ のソリューションは単純です:

form.$submitted && form.email.$error.required

Answer 2

Bootstrap 3 を使用しているので、次のディレクティブを使用します ( plunkrを参照) 。

    var ValidSubmit = ['$parse', function ($parse) {
        return {
            compile: function compile(tElement, tAttrs, transclude) {
                return {
                    post: function postLink(scope, element, iAttrs, controller) {
                        var form = element.controller('form');
                        form.$submitted = false;
                        var fn = $parse(iAttrs.validSubmit);
                        element.on('submit', function(event) {
                            scope.$apply(function() {
                                element.addClass('ng-submitted');
                                form.$submitted = true;
                                if(form.$valid) {
                                    fn(scope, {$event:event});
                                }
                            });
                        });
                        scope.$watch(function() { return form.$valid}, function(isValid) {
                            if(form.$submitted == false) return;
                            if(isValid) {
                                element.removeClass('has-error').addClass('has-success');
                            } else {
                                element.removeClass('has-success');
                                element.addClass('has-error');
                            }
                        });
                    }
                }
            }
        }
    }]

    app.directive('validSubmit', ValidSubmit);

そして私のHTMLで：

<form class="form-horizontal" role="form" name="form" novalidate valid-submit="connect()">
  <div class="form-group">
    <div class="input-group col col-sm-11 col-sm-offset-1">
      <span class="input-group-addon input-large"><i class="glyphicon glyphicon-envelope"></i></span>
      <input class="input-large form-control" type="email" id="email" placeholder="Email" name="email" ng-model="email" required="required">
    </div>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.required">please enter your email</p>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.email">please enter a valid email</p>
  </div>
</form>

更新しました

私の最新のプロジェクトでは、Ionic.validを使用しているため、次のようにすると.invalid、input-item

.directive('input', ['$timeout', function ($timeout) {
  function findParent(element, selector) {
    selector = selector || 'item';
    var parent = element.parent();
    while (parent && parent.length) {
      parent = angular.element(parent);
      if (parent.hasClass(selector)) {
        break;
      }
      parent = parent && parent.parent && parent.parent();
    }
    return parent;
  }

  return {
    restrict: 'E',
    require: ['?^ngModel', '^form'],
    priority: 1,
    link: function (scope, element, attrs, ctrls) {
      var ngModelCtrl = ctrls[0];
      var form = ctrls[1];

      if (!ngModelCtrl || form.$name !== 'form' || attrs.type === 'radio' || attrs.type === 'checkbox') {
        return;
      }

      function setValidClass() {
        var parent = findParent(element);
        if (parent && parent.toggleClass) {
          parent.addClass('validated');
          parent.toggleClass('valid', ngModelCtrl.$valid && (ngModelCtrl.$dirty || form.$submitted));
          parent.toggleClass('invalid', ngModelCtrl.$invalid && (ngModelCtrl.$dirty || form.$submitted));
          $timeout(angular.noop);
        }
      }

      scope.$watch(function () {
        return form.$submitted;
      }, function (b, a) {
        setValidClass();
      });


      var before = void 0;
      var update = function () {
        before = element.val().trim();
        ngModelCtrl.$setViewValue(before);
        ngModelCtrl.$render();
        setValidClass();
      };
      element
        .on('focus', function (e) {
          if (ngModelCtrl.$pristine) {
            element.removeClass('$blurred');
          }

        })
        .on('blur', function (e) {
          if (ngModelCtrl.$dirty) {
            setValidClass();
            element.addClass('$blurred');
          }
        }).on('change', function (e) {
          if (form.$submitted || element.hasClass('$blurred')) {
            setValidClass();
          }
        }).on('paste', function (e) {
          if (form.$submitted || element.hasClass('$blurred')) {
            setValidClass();
          }
        })
      ;

    }
  };
}])

そしてHTMLで：

    <form name='form' novalidate="novalidate" ng-submit="auth.signin(form, vm)">
          <label class="item item-input item-floating-label">
            <span class="input-label">Email</span>
            <input type="email" placeholder="Email" ng-model="vm.email" autofocus="true" required
              >
          </label>
          <button ng-if="!posting" type="submit" class="item button-block item-balanced item-icon-right  call-to-action">Login<i class="icon ion-chevron-right"></i>
          </button>

そしてコントローラーで：

  self.signin = function (form, data) {
    if (!form.$valid) return;

    Authentication.emailLogin(data)
    //...

そのため、CSS では次のようなことができます。

.item.valid::before{
    float: right;
    font-family: "Ionicons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #66cc33;
    margin-right: 8px;
    font-size: 24px;
    content: "\f122";
}

.item.invalid::before{
    float: right;
    font-family: "Ionicons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ef4e3a;
    margin-right: 8px;
    font-size: 24px;
    content: "\f12a";

/*
    border-left: solid 2px #ef4e3a !important;
    border-right: solid 2px #ef4e3a !important;
*/
}

はるかに簡単です！

Answer 3

私も同じ問題を抱えていました。送信された変数をtrueに設定するng-submitを追加して問題を解決しました。

<form name="form" ng-submit="submitted = true" novalidate>
<div>
    <span ng-if="submitted && form.email.$error.email">invalid email address</span> 
    <span ng-if="submitted && form.email.$error.required">required</span>
    <label>email</label>
    <input type="email" name="email" ng-model="user.email" required>
</div>

<div>
    <span ng-if="submitted && form.name.$error.required">required</span>
    <label>name</label>
    <input type="text" name="name" ng-model="user.name" required>
</div>

<button ng-click="form.$valid && save(user)">Save</button>
</form>

$submitted を使用するアイデアが気に入っています。Angular を 1.3 にアップグレードする必要があると思います ;)

Answer 4

それを達成するための2つの方法を考え出すことができます。

最初のものはnovalidate、ブラウザーの検証を有効にするために削除することです。

次に、saveこのようにフォームが無効な場合はボタンを無効にすることができます

<input ng-disabled="!frmRegister.$valid" type="submit" value="Save" />

それが役に立てば幸い。

Answer 5

シンプルでエレガントな方法が 2 つあります。

純粋な CSS:

最初のフォーム送信後、フォームの有効性にもかかわらず、Angular はng-submitted送信されたばかりのフォーム内のすべてのフォーム要素にクラスを追加します。

.ng-submittedCSS を介して要素を制御するために使用できます。

ユーザーが送信したときにのみエラーテキストを表示したい場合

.error { display: none }
.ng-submitted .error {
     display: block;
}

スコープからの値の使用:
最初のフォーム送信後、フォームの有効性にもかかわらず、Angular は[your form name].$submittedtrue に設定されます。したがって、その値を使用して要素を制御できます。

<div ng-show="yourFormName.$submitted">error message</div>
<form name="yourFormName"></form>

Answer 6

フォームを送信する前に、フォームが汚れていて有効かどうかのみを確認する必要があります。次のコードをチェックアウトします。

<form name="frmRegister" data-ng-submit="frmRegister.$valid && frmRegister.$dirty ? register() : return false;" novalidate>      

また、次の変更で送信ボタンを無効にすることもできます。

<input type="submit" value="Save" data-ng-disable="frmRegister.$invalid || !frmRegister.$dirty" />

これはあなたの最初の

Answer 7

http://jsfiddle.net/LRD5x/30/ シンプルなソリューション。

HTML

<form ng-submit="sendForm($event)" ng-class={submitted:submitted}>

JS

$scope.sendForm = function($event) {
  $event.preventDefault()
  $scope.submitted = true
};

CSS

.submitted input.ng-invalid:not(:focus) {
    background-color: #FA787E;
}

input.ng-invalid ~ .alert{
    display:none;
}
.submitted input.ng-invalid ~ .alert{
    display:block;
}

Answer 8

angularjs を使用した検証フォームの完全なソリューション。

HTMLは以下の通りです。

<div ng-app="areaApp" ng-controller="addCtrler">
        <form class="form-horizontal" name="fareainfo">
            <div class="form-group">
                  <label for="input-areaname" class="col-sm-2 control-label">Area Name : </label>
                  <div class="col-sm-4">
                      <input type="text" class="form-control" name="name" id="input-areaname" ng-model="Area.Name" placeholder="" required>
                      <span class="text-danger" ng-show="(fareainfo.$submitted || fareainfo.name.$dirty) && fareainfo.name.$error.required"> Field is required</span>
                  </div>
            </div>
             <div class="col-sm-12">
                  <button type="button" class="btn btn-primary pull-right" ng-click="submitAreaInfo()">Submit</button>
             </div>
        </form>
    </div>

AngularJS アプリとコントローラーは次のとおりです。

var areaApp = angular.module('areaApp', []); 
areaApp.controller('addCtrler', function ($scope) {
    $scope.submitAreaInfo = function () {  
       if ($scope.fareainfo.$valid) {
         //after Form is Valid
       } else {
          $scope.fareainfo.$setSubmitted();
       }
    };
});

---

重要なコード セグメント

1. ng-app="areaApp" ng-controller="addCtrler"
   Angular アプリとコントローラーを定義します

2. ng-show="(fareainfo.$submitted || fareainfo.name.$dirty) && fareainfo.name.$error.required"
   上記の条件により、ユーザーが最初にフォームを表示するたびに、画面に検証エラーが表示されなくなります。ユーザーがフォームに変更を加えて、検証メッセージが画面に表示されるようにします。。名前。input 要素の name 属性です。

3. $scope.fareainfo.$valid
   上記のコードでは、セグメントはユーザーがフォームを送信するたびにフォームが有効かどうかをチェックします。

4. $scope.fareainfo.$setSubmitted();
   上記のコードのセグメントは、ユーザーが何もせずにフォームを送信するたびに、すべての検証メッセージが画面に表示されるようにします。

Answer 9

// This worked for me.
<form  name="myForm" class="css-form" novalidate ng-submit="Save(myForm.$invalid)">
<input type="text" name="uName" ng-model="User.Name" required/>
<span ng-show="User.submitted && myForm.uName.$error.required">Name is required.</span>
<input ng-click="User.submitted=true" ng-disabled="User.submitted && tForm.$invalid" type="submit" value="Save" />
</form>
// in controller
$scope.Save(invalid)
{
if(invalid) return;
// save form
}

Answer 10

このコードを試してください：

<INPUT TYPE="submit" VALUE="Save" onClick="validateTester()">

この関数は結果を検証します

function validateTester() {
    var flag = true
    var Tester = document.forms.Tester
    if (Tester.line1.value!="JavaScript") {
        alert("First box must say 'JavaScript'!")
        flag = false
        }
    if (Tester.line2.value!="Kit") {
        alert("Second box must say 'Kit'!")
        flag = false
        }
    if (flag) {
        alert("Form is valid! Submitting form...")
        document.forms.Tester.submit()
        }
    }