У меня был стандартный набор входов переключателей, которые использовали 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
Casey Crookston 28 Фев 2017 в 21:47

2 ответа

Лучший ответ

Вы, должно быть, ищете-

input[type="radio"] {
    visibility: hidden;
}

Чтобы они оставили ваш документ без помех

input[type="radio"] {
    visibility: hidden;
    position: absolute;
    height: 0;
    width: 0;
}

Также, чтобы они работали в скрытом режиме видимости, оберните их в метку .

1
Vishal Kumar Sahu 28 Фев 2017 в 18:51

По умолчанию jQuery Validate не проверяет скрытые поля. Установив переключатель в display: none, вы заставляете его пропускать плагин.

Вы можете изменить это поведение, обновив параметр ignore плагина, как показано в этом ответе.

2
Community 23 Май 2017 в 12:00