web-dev-qa-db-ja.com

Bootstrap 4フォーム検証

私はbootstrapの初心者であり、bootstrap 3フォーム検証プラグインなどをたくさん見ましたが、bootstrap 4は見つかりませんでした。

私は複数のフォームを検証しようとしています、そしてこれが私のコードです：

<!-- Contact -->
<div class="container white">
  <div class="row">
    <div class="container white percent100">
      <div class="col-lg-12">
        <div class="padder-t2">
          <h1>Contact</h1>
          <div class="horiz-divider"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row padder-t padder-b">
    <div class="container white">
      <div class="col-lg-12">
        <!-- Form -->
        <form class="form-horizontal" action=" " method="post" id="contact_form">
          <fieldset>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>First Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Last Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>E-Mail</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                    <input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Phone #</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                    <input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text area -->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Message</h4></label>
                </div>
                <div class="col-md-4 col-lg-5 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                    <textarea id="comment" class="form-control" name="comment" placeholder="Your Message"></textarea>
                  </div>
                </div>
              </div>
            </div>
            <!-- Success message -->
            <div class="alert alert-success" role="alert" id="success_message">Success <i class="fa fa-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
            <!-- Button -->
            <div class="form-group">
              <div class="row">
                <label class="col-md-4 col-lg-4 control-label"></label>
                <div class="col-md-4 col-lg-4">
                  <button type="submit" class="btn btn-danger raised">Send <i class="fa fa-paper-plane"></i></button>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="row padder-b">
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-9 col-lg-9">Contact us directly:</h4>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Mail:</h4>
      <a class="col-md-6 col-lg-6 padder-lr" href="mailto:[email protected]">
        <h4 id="mail">[email protected]</h4>
      </a>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Adress:</h4>
      <h4 class="col-md-6 col-lg-6 padder-lr" id="adress">2 LoremIpsum Road, 67000 City - Country</h4>
    </div>
  </div>
</div>

既存のjsを変更しようとしましたが、うまくいきませんでした。

これがレンダリングされたフォームです：

フォームのjsfiddle

javascriptjqueryvalidationbootstrap-4jquery-form-validator
7
Cédric MEYER

最初に Jonathan Dion のような外部ライブラリで問題を解決しました。しかし、最近これに遭遇しました：

Bootstrap v4.0は独自のフォーム検証を導入しましたが、それでもバックエンドのphp検証とペアにすることができます。 Doc から：

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        Doesn't look good!
      </div>
    </div>
  </div>
</div>

次にJSを使用します：

<script>
// 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);
})();
</script>

これにより、入力ボーダーの色付けが提供され、指定されたパターンまたはプロパティに従って有効/無効のフィードバックブロックが表示されます。 CSSの2つの疑似クラス:invalidと:validを介して適用されます。 <input>、<select>、<textarea>要素に適用されます。

7
Cédric MEYER

Webで利用可能な任意のライブラリを使用できます。jqueryvalidation を試すことができます。使い方はとても簡単です。ドキュメントを読んでください。

requiredにinput属性を追加すると、jqueryvalidationが機能します。スタイリングについては、独自のCSSを追加して、ブートストラップのように見せることができます。

それが役に立てば幸い

$(document).ready(function(){
 $('#contact_form').validate()
})

デモ

4
Jonathan Dion

2020を更新-Bootstrap 4.4.x

これは、各入力を一度に1つずつ検証する場合の別のオプション（モダンJS）です（liveまたはreal- time）フォーム全体が送信されるのを待つ代わりに...

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // fetch all the forms we want to apply custom style
    var inputs = document.getElementsByClassName('form-control')

    // loop over each input and watch blue event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // reset
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
    <div class="form-group">
        <label class="form-control-label" for="input1">Enter some input</label>
        <input type="text" class="form-control" name="input1" id="input1" 
            autocomplete="no" required>
        <div class="valid-feedback">Success! You've done it.</div>
        <div class="invalid-feedback">No, you missed this one.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="input2">Enter password</label>
        <input type="text" class="form-control" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$" 
            autocomplete="no" name="input2" id="input2">
        <div class="valid-feedback">Nice! You got this one!</div>
        <div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
    </div>
    <div>
        <button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
    </div>
</form>

https://codeply.com/p/mzBNbAlOvQ

2
Zim

Bootstrap 4 JSフォーム検証を実装するためのよりシンプルでもう少しモダンな方法を見つけました ：

注：<form>要素にはnovalidate属性が必要です。同時に、各<input>要素にはrequired属性が必要です。

// Upon load..
window.addEventListener('load', () => {

  // Grab all the forms
  var forms = document.getElementsByClassName('needs-validation');
  
  // Iterate over each one
  for (let form of forms) {
  
    // Add a 'submit' event listener on each one
    form.addEventListener('submit', (evt) => {
    
      // check if the form input elements have the 'required' attribute  
      if (!form.checkValidity()) {
        evt.preventDefault();
        evt.stopPropagation();
        console.log('Bootstrap will handle incomplete form fields');
      } else {
        // Since form is now valid, prevent default behavior..
        evt.preventDefault();
        console.info('All form fields are now valid...');
      }
      
      form.classList.add('was-validated');
      
    });
    
  }
  
});
<!-- Load necessary libraries -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Add form -->
<div class="container" style="padding-top: 40px;">
  <form class="student-search needs-validation" novalidate>
    <div class="form-row">
      <div class="form-group col-6">
        <label for="input-name-search" class="sr-only">Name</label>
        <input type="text" class="form-control" id="input-name-search" placeholder="Name" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Enter a name please.</div>
      </div>
      <div class="col-6">
        <button id="btn-search" type="submit" class="btn btn-success btn-block">Search student</button>
      </div>
    </div>
  </form>
</div>
1
Juan Marco

ここでは実際にライブラリは必要ありません。ネイティブのreportValidation()メソッドを使用できます [〜＃〜] mdn [〜＃〜] 。個々の入力またはフォーム全体で呼び出すことができます。

0
Abraham Brookes

私のコードが検証されなかった理由がわかりました。検証をトリガーする送信ボタンがありませんでした。それを持っていることを確認してください。

<button type="submit" class="btn btn-primary">Save</button>
0
phoenix