How to create a jQuery function to verify all input fields before the submit button applies function

Question

I have 2 forms reservation info form & customer info form. I've set all of the input fields as required. I also have a button that is only supposed to hide the first form and show the second once clicked. I have it as type="button" since I'm not really submitting it anywhere.

I created a jQuery click() handler for my button.

My Issue is that I've tested the button and it completely bypasses the required validation of the input fields. It shows the second form and hides the first regardless of empty input fields.

I would like it if the forms validated the required attribute, so there are no blank input fields before they hide/show.

script.js

$(function () {
  $('#reservation-submit-btn').click(function () {
    $('#reservation-info-form').hide('slow');
    $('#customer-info-form').show('slow');
   })
})

HTML file

<div id="reservation-info-form" class="reservation-form-wrapper" aria-labelledby="reservation-form-label">
    <div id="reservation-form-label"><h2>Make A Reservation</h2></div>
    <form id="reservation-form" aria-label="reservation form" method="post" autocomplete="off">
      <label for="res-date"></label>
      <input
        aria-label="reservation date"
        type="date"
        name="res-date"
        id="res-date"
        placeholder="current date"
        required
      />
      <label for="res-time"></label>
      <input
        aria-label="reservation time"
        type="time"
        name="res-time"
        id="res-time"
        placeholder="current time"
        required
      />
      <label for="res-party-size"></label>
      <input
        aria-label="party size"
        type="number"
        min="1"
        max="9"
        name="res-party-size"
        id="res-party-size"
        placeholder=0
        required
      />
      <button type="button" id="reservation-submit-btn" class="submit-btn">
        Find a Table
      </button>

I realize that creating a click handler just adds a method to the button and doesn't consider all of the input fields or the required attributes. So my real question is how do I do this in a way where I create the effects I need from the button while not bypassing the required attribute on the input fields?

Instead of binding `click` on button why not better go with binding `submit` on the form? — Vinay, Oct 02 '22 at 03:05
Does this answer your question? [Check if all required fields are filled in a specific div](https://stackoverflow.com/questions/57087145/check-if-all-required-fields-are-filled-in-a-specific-div) — kmoser, Oct 02 '22 at 03:49
@Vinay thanks for your question. I chose `click` because the data does not need to persist or be stored, or really "submitted" in any way. My only concern is having it function as a proper form. Once all input fields are filled in, only then should it be able to "submit" or have the effect of hiding first form and showing the next. — SlickRick, Oct 02 '22 at 17:29

score 0 · Answer 1 · answered Oct 02 '22 at 04:30

You can use a library called jQuery Validation. It has built-in functions for auto-validate the forms. Also you have to change the type of your button from type=button to type=submit

$("#reservation-info-form").validate({
  submitHandler: function(form) {
    $('#reservation-info-form').hide('slow');
    $('#customer-info-form').show('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<div id="reservation-info-form" class="reservation-form-wrapper" aria-labelledby="reservation-form-label">
  <div id="reservation-form-label">
    <h2>Make A Reservation</h2>
  </div>
  <form id="reservation-form" aria-label="reservation form" method="post" autocomplete="off">
    <label for="res-date"></label>
    <input aria-label="reservation date" type="date" name="res-date" id="res-date" placeholder="current date" required />
    <label for="res-time"></label>
    <input aria-label="reservation time" type="time" name="res-time" id="res-time" placeholder="current time" required />
    <label for="res-party-size"></label>
    <input aria-label="party size" type="number" min="1" max="9" name="res-party-size" id="res-party-size" placeholder=0 required />
    <button id="reservation-submit-btn" class="submit-btn" type="submit">
        Find a Table
      </button>
  </form>
</div>

you don't need the word `built-in`, except jQuery has `built-in` validation function. — uingtea, Oct 02 '22 at 06:26

How to create a jQuery function to verify all input fields before the submit button applies function

1 Answers1