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

Please edit the question to clarify what the problem is. What's not working? — Carol Skelly
– Carol Skelly, Commented Feb 14, 2018 at 22:19

Carol Skelly · Accepted Answer · 2018-08-29 15:46:38Z

12

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

edited Aug 29, 2018 at 15:46

answered Feb 14, 2018 at 21:55

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew Over a year ago

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.

Carol Skelly Over a year ago

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

Matthew Over a year ago

Posted here stackoverflow.com/questions/48815128/…

Collectives™ on Stack Overflow

Bootstrap 4 Form Validation with Javascript /jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related