HTML5 input required, scroll to input with fixed navbar on submit-JavaScript中文网-JavaScript教程资源分享门户

HTML5 introduced the required attribute for form elements, which can help ensure that users fill out all necessary fields before submitting a form. However, when a user submits a form with a missing required field, they may be directed to the top of the page, making it difficult for them to locate the missing field(s).

In this article, we will explore how to use JavaScript and jQuery to automatically scroll to the first missing required field on form submission, while taking into account the presence of a fixed navbar.

The HTML

We'll start by creating an example form with some required fields and a fixed navbar at the top of the page:

--------- -----
------
  ------
    ------------- -- -------- -------------
    ---- --- --- --------- --- ----------- -- ---------- --------- ---- ---
  -------
  ------
    ---- ------------- ------------------
      ----
        ------ ----------------------
        ------ -----------------------
        ------ -------------------------
      -----
    ------
    ---- ------------------
      ---------- ---------
      ----- -----------------
        ------ ------------------------
        ------ ----------- --------- ----------- ---------
        ----
        ------ --------------------------
        ------ ------------ ---------- ------------ ---------
        ----
        ------ --------------------------------
        ------ --------------- ------------- --------------- ---------
        ----
        ------- -----------------------------
      -------
    ------
  -------
-------

The JavaScript

Next, we will write some JavaScript code to handle form submission and scroll to the first missing required field:

---------------------------- -
  ------------------------------ --------------- -
    -- ------- ---- ----------
    -----------------------

    -- ---- --- ----- ------- -------- -----
    --- ------------- - -------------------------------------- -
      ------ ------------- --- ---
    -----------

    -- ---------------------- -
      -- ------ -- --- ------- -----
      --- ------------ - ---------------------------
      --- ----------- - -------------------------- - -------------
      -------- ----------------
        ---------- -----------
      -- -----
    - ---- -
      -- ------ --- ---- -- --- -------- ------ --- ------ ---
      --------------
    -
  ---
---

Let's take a closer look at what's happening in this code.

First, we use jQuery to attach a submit event handler to our form using the #signup-form selector. When the form is submitted, we prevent the default form submission behavior with event.preventDefault().

Next, we find the first missing required input by selecting all input elements with the required attribute and filtering them based on whether their value is empty or not. We then use the first() method to select only the first missing input, if any.

If we find a missing input, we calculate its offset from the top of the page, taking into account the height of the fixed navbar. We then use jQuery's animate() method to smoothly scroll the page to the missing input over a duration of 500 milliseconds.

If all required inputs are filled out, we simply submit the form using this.submit().

Conclusion

In this article, we've explored how to automatically scroll to the first missing required field on form submission using JavaScript and jQuery, while taking into account the presence of a fixed navbar. This technique can improve the user experience and make it easier for users to correct form errors.

Remember to always test your code thoroughly across different browsers and devices to ensure optimal compatibility and performance.

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/29168