web-dev-qa-db-ja.com

Bootstrap ajax送信前の4クライアント検証

フォームがあります（以下を参照）。プロジェクトではbootstrap 4に従うので、可能な限り再利用し、不要な場所に独自のコードを記述しないことを好みます。

ユーザーが[送信]ボタンを押すと、AJAX POSTリクエストを実行し、応答として、いくつかの情報を含むJSONオブジェクトを取得します。その応答に基づいて、私はいくつかの論理を実行する必要があります。

<form name="signin" class="js-form-submit needs-validation" action="/signin">
  <div class="form-group">
    <label for="username">User Name</label>
    <input class="form-control" id="username" name="username" autofocus>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" >
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit/button>
</form>

ここで、クライアント側の検証を行いたいと思います（そして、可能であればbootstrapを使用することを好みます）。例はありますが、通常の送信では機能しますが、AJAXでは機能しません。bootstrap呼び出しの前にAJAX 4クライアント側検証を実行するにはどうすればよいですか？

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

https://getbootstrap.com/docs/4.0/components/forms/#custom-styles

誰かが私に方向を示したり、コードのスニペットを教えたりすることができます。

ありがとう。

javascriptjqueryvalidationbootstrap-4
7
Dmytro Pastovenskyi

JQueryを使用して解決策を見つけました。このコードを試してください、

$('your-form-id').submit(function (event) {
    event.preventDefault();
    if ($('your-form-id')[0].checkValidity() === false) {
        event.stopPropagation();
    } else {
        //do your ajax submition here
    }
    $('your-form-id').addClass('was-validated');
});
4
Shansana Waruna

Ajaxリクエストをelse条件ステートメントに追加します。これで完了します。

// Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }else {
               //do your ajax submition here
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
2
Message Akunna