jQuery Validate with fixed header

Question

I am using the jQuery validate plugin and I have a fixed header.

When ever I press the submit button and a required field is missing, the plugin jumps directly to the field and shows that it is required. However, since I have a fixed header, the plugin jumps to the field and one can't see it because it is under the fixed header. How can I fix this?

Here is a minimal sample code and teh associated jFiddle

$("#awesome").validate({
    rules: {
        name: "required"
    }
});

form {
    margin-top: 50px;
}

.top-menu {
    height: 50px;
    background-color: rgba(23,123,23,0.3);
    font-size: 16px;
    color: #FFF;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
}

<div class='top-menu'>Fixed Menu</div>
<form id='awesome' method='POST' >
    <input type='text' id='name' name='name'>
    <div style='height:3000px;background-color:red;'></div>
    <input type='submit'>
</form>

Edit: I am looking for a solution that is similar to offsetting an html anchor to adjust for fixed header. I am a bit puzzled, because I dont really know how the plugin scrolls to the 'required' field. I did not find something like method 'scrollTo' within the plugin. If I would find the according code section, one could maybe simple change the offset where it scrolls to?

score 3 · Accepted Answer · answered Jun 16 '16 at 11:46

I was able to fix it with this additional jQuery script (see jFiddle):

 $("input").focus(function(){
      var elementOffset = $(this).offset().top,
      scrollTop     = $(window).scrollTop(),
      distance      = (elementOffset - scrollTop);

      var addSpace = 50 - distance;

      if(addSpace > 0)
      {
          var y = $(window).scrollTop();  
          $(window).scrollTop(y-addSpace);
      }
  });

score 0 · Answer 2 · answered Jun 16 '16 at 10:08

0

Add this css and try:

form#awesome input[type="text"]:focus {
    margin-top: 40px;
}

You can change the top margin how much ever you need.

answered Jun 16 '16 at 10:08

Abhay Naik

405
1
4
17

Okay thats true, but adding a top-margin to the input changes also the HTML flow. I was trying to look for similar solution like for page ankers: http://nicolasgallagher.com/jump-links-and-viewport-positioning/ but I dont know how to do it. – Adam Jun 16 '16 at 10:51

score 0 · Answer 3 · answered Jun 16 '16 at 10:20

0

To display element above of another element, one way of doing this is to use z-index Property.

So you can do this to your error elements:

.error{
  z-index:99;
  position: relative;
}

JsFiddle Demo

answered Jun 16 '16 at 10:20

ebram khalil

8,252
7
42
60

Sayed Rafeeq · Answer 4 · 2016-06-16T11:02:59.200

0

Here is fixed version code of your jQuery validate form with Fixed header.

JSFiddle Demo: https://jsfiddle.net/o4dfhtgc/2/

Check the demo:

$("#awesome").validate({
    rules: {
      name: "required"
    }
});

body {
  padding: 0; margin: 0;
}
form{
  margin-top: 50px;
  padding: 10px;
}
.top-menu{
  height: 50px;
  background-color: rgba(23,123,23,0.3);
  font-size: 16px;
  color: #FFF;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}
label#name-error {
    display: inline-block;
    padding-left: 5px;
    color: #ffffff;
}
input[type="submit"] {
  display: block;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<div class='top-menu'>
  Fixed Menu
</div>

<div style='height:3000px; background-color:red;'>
  <form id='awesome' method='POST' >
    <input type='text' id='name' name='name'>  
    <input type='submit'>
  </form>
</div>

edited Jun 16 '16 at 11:02

answered Jun 16 '16 at 10:46

Sayed Rafeeq

1,219
1
15
28

Doesnt work for me, the required field is still hidden. – Adam Jun 16 '16 at 10:52
I have checked in your JDFiddle it has only one input with submit button and you are using validate js for form validation. Now after clicking on the submit button...it's showing error message perfect. I didn't get you where is the "required field is still hidden". give me a clarification please. – Sayed Rafeeq Jun 16 '16 at 10:59
Here is a screen shot when I execute your code : http://fs5.directupload.net/images/160616/imh6frf9.png The label "This field is required" is still under the Fixed Menu. – Adam Jun 16 '16 at 11:04
I think you are missing my css. Please check it once. – Sayed Rafeeq Jun 16 '16 at 11:07

score 0 · Answer 5 · answered Feb 18 '21 at 15:10

This one scrolls the element into the center of the window if the form validation fails:

//scroll invalid inputs into the center of the window on validation failures
// noinspection JSUnresolvedFunction
$('input,select,textarea').on('focus', function () {
    if ($(this).is(':invalid')) {
        try {
            let top = $(this).offset().top;
            let height = $(this).height();
            let windowHeight = $(window).height();
            let offset = ((windowHeight / 2) < height) ?
                (top - (windowHeight / 2))
                : (top - ((windowHeight / 2) - (height / 2)));
            // noinspection JSUnresolvedFunction
            window.setTimeout(function () {
                $([document.documentElement, document.body]).animate({
                    scrollTop: offset
                }, 100);
            }, 10);
        } catch (error) {
            console.log(error);
        }
    }
});

jQuery Validate with fixed header

5 Answers5