jQuery Validation button style changes upon submit

Question

I am working on updating/styling a site and thus I have used a custom submit button for my login form. However when clicking on submit without any valid input the styling completely changes and its position jumps:

Issue: http://test.theobaart.com/ReWork/loginIssue.png

A live version can be seen here and the plugin I'm using is jQuery Validation (jqueryvalidation.org)

The relevant code is as follows:

html:

<form id="createForm" method="post" action="create.php">

    <label for="email">Email</label>
    <input id="email" type="email" name="email"/>

    <label for="password">Password</label>
    <input id="password" type="password" name="password"/>

    <input class="submit" type="submit" value="Login"/>
</form>

css:

/* Login form stuff */
form {
    width: 100%;
    margin: 0 auto;
}

label, input {
    display: inline-block;
}

label {
    width: 30%;
    text-align: right;
}

label + input {
    width: 60%;
    margin: 10px 0 10px 4%;
}
/* Styling for input button */
input + input {
    width: 20%;
    max-width: 100px;
    margin: 0 40% 10px 40%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    font-family: Arial;
    color: #a6afb9;
    font-size: 21px;
    background: #fffffff;
    padding: 10px 10px 10px 10px;
    border: solid #5f6f81 2px;
    text-decoration: none;
}

input + input:hover {
    background: #5f6f81;
    text-decoration: none;
}
#loginForm div.error {
    width: 100%;
    text-align: center;
    color: red;
}

Beyond importing jquery.validate.min.js I also use the following script:

$("#loginForm").validate({
    errorElement: 'div',
    rules: {
         email:{required:true},
         password: {required: true}
    }
});

I'm kind off at loss as to what it could be (hence why I'm asking here) and, as far as I am aware, it isn't exactly a common issue so I have not been able to find anything relevant on stackoverflow/google. Any and all help is appreciated!

Thanks a lot,

Theo

P.S. On some last minute double checking before I post this. This only seems to happen when the bottom field (password) is invalid. When it is just the email field that is invalid no style changes occur.

Can you put together a jsfiddle? I would say when you are adding divs with the validation, you are messing with the styles. BTW , with modern browsers you can use "required" in the fields that you need, and then fall back for other browsers with your JS. — Mark Robson, Jun 08 '14 at 22:02
@Mark Robson. The jsfiddle can be found **[here](http://jsfiddle.net/CQmGE/)**. The reason I have a div for the `errorElement` is because I wanted to have possible validation error messages to appear on the next line as opposed to after the input element. According to another stackoverflow question ([here](http://stackoverflow.com/questions/14666852/jquery-form-validation-css-of-error-label) adding `errorElement: 'div'` solved that issue. — Theo B., Jun 08 '14 at 22:51

Nile · Accepted Answer · 2014-06-08T23:00:36.697

I believe the issue has to do with your css direct sibling selector (+) you use for your input styling. What this is doing is selecting all inputs that immediately follow another input element.

/* Styling for input button */
input + input {
   /* your styling */
}

So before your form is submitted, your html looks like the following, so your css seems to work correctly. The submit button is being styled because it directly follows another input element.

Html before submitted

After you submit the form, jQuery validation is inserting some nodes in between your html:

Html after submitted

The button is no longer styled because your css selector input + input no longer applies to it. As you noted, the problem with the button becoming unstyled only happens when the password field is incorrect, which is consistent with this.

What you should do is just use a css class to style the button, such as:

HTML:

<input class="submit createButton" type="submit" value="Login" />

CSS:

.createButton {
    width: 20%;
    max-width: 100px;
    margin: 0 40% 10px 40%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    font-family: Arial;
    color: #a6afb9;
    font-size: 21px;
    background: #fffffff;
    padding: 10px 10px 10px 10px;
    border: solid #5f6f81 2px;
    text-decoration: none;
}

Jsfiddle: http://jsfiddle.net/CQmGE/1/

Thanks for the suggestion. I have implemented it on my site and in a **[jsfiddle](http://jsfiddle.net/M98pL/5/)**, however, the issue still seems to exist. — Theo B., Jun 08 '14 at 23:03
I noticed I misplaced the class property the first time I answered, I've updated my answer to fix this and the jsfiddle link I posted works now. — Nile, Jun 08 '14 at 23:06
Kind off embarrassing that I didn't notice that, but that does indeed do the trick :). Thanks a lot! — Theo B., Jun 08 '14 at 23:16

jQuery Validation button style changes upon submit

1 Answers1