Bootstrap 4 Form Validation with Javascript /jQuery

Question

I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's doc for Custom Styles to handle those with accessibility issues that use screen readers, and to standardize the validation appearance to users across different browsers.

I have set up a basic form as well as am trying to create a JavaScript function using jQuery to handle the validation. I feel like I am almost there, but still do not have the validation working as the Bootstrap demo displays.

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

Solution

The problem is that checkValidity() exists on the first form node, not the form.

Change this: form.checkValidity() === false

to this: form[0].checkValidity() === false

and it works: 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

  })
})

More on Bootstrap 4 Validation:
Can't make the validation work in Bootstrap 4

Comments

[Matthew]

thanks for the tip on my question format. I've noticed that when adding radio button inputs, even though they don't have the required attribute, the label text foreground turns green upon form validation. Is there a way to perform no validation, or bypass validation, to stop the radio button labels' foreground from turning green the since it is one of only two options (2 radio buttons total) by which one must be selected by default? I'm just wondering why this would happen as it looks weird, especially if the required attribute is not placed on either radio button input.

[Zim]

That sounds like a separate question. Post a new question with the code example.

[Matthew]

Posted here stackoverflow.com/questions/48815128/…