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.

Answer 1

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.

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

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/