web-dev-qa-db-ja.com

Bootstrap 4 Javascript / jQueryを使用したフォーム検証

私はWeb開発に不慣れで、フォームの検証を学ぶための練習用フォームを設定しようとしています。私はBootstrapの doc に従って、カスタムスタイルを使用して、スクリーンリーダーを使用するアクセシビリティの問題があるものを処理し、さまざまなブラウザーでユーザーの検証の外観を標準化します。

基本的なフォームを設定し、jQueryを使用して検証を処理するJavaScript関数を作成しようとしています。もうすぐそこにいるように感じますが、Bootstrapデモが表示されているため、検証が機能していません。

index.html

<form id="signup-form" novalidate>

  <div class="form-group">
    <h1>Sign Up</h1>
    <p>Use this form to enter your name and email to sign up.</p>
  </div>

  <!-- Name -->
  <div class="form-group">
    <div class="row">
      <div class="col">
        <label for="firstNameInput">Name</label>
        <input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col">
        <label for="lastNameInput">Last</label>
        <input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
  </div>

  <!-- Email -->
  <div class="form-group">
    <label for="emailAddressInput">Email address</label>
    <input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="[email protected]" required>
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>

  <!-- Options -->
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
      <label class="form-check-label" for="type1RadioButton">
        Type 1 user
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
      <label class="form-check-label" for="type2RadioButton">
        Type 2 user
      </label>
    </div>
  </div>

  <!-- Submit Button -->
  <div class="form-group">
    <a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
  </div>

</form>

script.js

$(document).ready(function() {
  $("#submitButton").click(function() {

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    //alert(form.prop('id')) //test to ensure calling form correctly

    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.addClass('was-validated')
  })
})
javascriptjquerytwitter-bootstrapvalidationbootstrap-4
3
Matthew

問題は、checkValidity（）がフォームではなくfirstフォームノードに存在することです。

これを変更します：form.checkValidity() === false

これに：form[0].checkValidity() === false

そしてそれは動作します： https://www.codeply.com/go/pUPBLzn6yL

$(document).ready(function() {
  $("#submitButton").click(function() {

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    alert(form.prop('id')) //test to ensure calling form correctly

    if (form[0].checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.addClass('was-validated');

    //Make ajax call here

  })
})


Bootstrap 4検証の詳細：
Bootstrap 4 で検証を機能させることはできません

4
Zim