У меня был стандартный набор входов переключателей, которые использовали jQuery Validate. Все работало просто отлично
<div class="panel-heading">1. What is your impression of ... <label class="error SurveyError" for="Impression"></label></div>
....
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Excellent"> Excellent</label></div>
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Good"> Good</label></div>
...
А затем этот скрипт для добавления проверки:
$('.SurveyQuestion').each(function () {
$(this).rules('add', {
required: true,
messages: {
required: "Please answer this question."
}
});
});
Работал отлично. Но теперь мне нужно стилизовать радио-кнопку с изображением. Таким образом, HTML изменился на это:
...
<div><input type="radio" id="q1a" class="SurveyQuestion" name="Impression" value="Excellent"><label for="q1a"><span></span>Excellent</label></div>
<div><input type="radio" id="q1b" class="SurveyQuestion" name="Impression" value="Good"><label for="q1a"><span></span>Good</label></div>
...
С помощью этого CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:20px;
height:20px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(/images/radio.png) no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(/images/radio-selected.png) no-repeat;
}
Теперь стиль выглядит великолепно! Но проверка перестала работать. Даже без ответа форма, кажется, думает, что вопрос действителен ... или ... что-то.
Я заметил, что если я оставлю оригинальный флажок видимым ...
input[type="radio"] {
/*display:none;*/
}
... что проверка еще работает. Так, по какой-то причине при использовании поддельного флажка, сделанного из изображений вместо реального флажка, сделанного браузером, проверка перестает работать.
И (вроде другой предмет, но пока мы здесь) я также заметил, что с изображенными переключателями больше нельзя нажимать на этот вопрос. Нажатие на вкладку просто пропускает все эти переключатели.
2 ответа
Вы, должно быть, ищете-
input[type="radio"] {
visibility: hidden;
}
Чтобы они оставили ваш документ без помех
input[type="radio"] {
visibility: hidden;
position: absolute;
height: 0;
width: 0;
}
Также, чтобы они работали в скрытом режиме видимости, оберните их в метку .
По умолчанию jQuery Validate не проверяет скрытые поля. Установив переключатель в display: none
, вы заставляете его пропускать плагин.
Вы можете изменить это поведение, обновив параметр ignore
плагина, как показано в этом ответе.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.