Стиль кнопки проверки jQuery изменяется при отправке

Я работаю над обновлением/стилизацией сайта, поэтому я использовал пользовательскую кнопку отправки для формы входа. Однако при нажатии на кнопку «Отправить» без какого-либо действительного ввода стиль полностью меняется, и его положение прыгает:

Проблема: http://test.theobaart.com/ReWork/loginIssue.png

Живую версию можно увидеть здесь, а я использую плагин jQuery Validation (jqueryvalidation.org )

Соответствующий код выглядит следующим образом:

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;
}

Помимо импорта jquery.validate.min.js я также использую следующий скрипт:

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

Я немного в растерянности относительно того, что это может быть (поэтому я и спрашиваю здесь), и, насколько мне известно, это не совсем распространенная проблема, поэтому я не смог найти ничего подходящего на переполнение стека/гугл. Любая помощь приветствуется!

Большое спасибо,

Тео

P.S. В последнюю минуту перепроверил, прежде чем опубликовать это. Кажется, это происходит только тогда, когда нижнее поле (пароль) недействительно. Когда недействительным является только поле электронной почты, изменения стиля не происходят.


javascript validation jquery css submit-button
person Theo B.    schedule 08.06.2014    source источник
comment
Можете ли вы собрать jsfiddle? Я бы сказал, что когда вы добавляете div с проверкой, вы путаетесь со стилями. Кстати, в современных браузерах вы можете использовать required в нужных вам полях, а затем вернуться к другим браузерам с вашим JS.   -  person Mark Robson    schedule 09.06.2014
comment
@Марк Робсон. jsfiddle можно найти здесь. Причина, по которой у меня есть div для errorElement, заключается в том, что я хотел, чтобы возможные сообщения об ошибках проверки появлялись на следующей строке, а не после элемента ввода. Согласно другому вопросу stackoverflow (здесь добавление errorElement: 'div' решило эту проблему.   -  person Theo B.    schedule 09.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я считаю, что проблема связана с вашим прямым селектором css (+), который вы используете для стиля ввода. Это делает выбор всех входных данных, которые следуют сразу за другим входным элементом.

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

Итак, до того, как ваша форма будет отправлена, ваш html выглядит следующим образом, поэтому ваш css работает правильно. Стиль кнопки отправки изменен, поскольку она непосредственно следует за другим элементом ввода.

Html перед отправкой

После отправки формы проверка jQuery вставляет некоторые узлы между вашим html:

Html после отправки

Кнопка больше не имеет стиля, потому что ваш селектор css input + input больше не применяется к ней. Как вы заметили, проблема с тем, что кнопка становится нестилизованной, возникает только в том случае, если поле пароля неверно, что согласуется с этим.

Что вам нужно сделать, так это просто использовать класс css для стилизации кнопки, например:

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/

person Nile    schedule 08.06.2014
comment
Спасибо за предложение. Я реализовал его на своем сайте и в jsfiddle, однако проблема, кажется, все еще существует. - person Theo B.; 09.06.2014
comment
Я заметил, что потерял свойство класса при первом ответе, я обновил свой ответ, чтобы исправить это, и ссылка jsfiddle, которую я опубликовал, теперь работает. - person Nile; 09.06.2014
comment
Немного смущает, что я этого не заметил, но это действительно помогает :). Большое спасибо! - person Theo B.; 09.06.2014