Если оценка (оценки) есть условие обязательное и их элементы управления, это только часть некой формы со множеством других полей, значит лучше этим оценкам определить значения по умолчанию, чем мурыжить форму различными проверками.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
@font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input, #cause {
display: none;
}
.text-center {
direction: rtl;
text-align: left;
color: #D9A41D;
font-size: 22px;
cursor: pointer;
}
.text-center > label:before {
content: "\f006";
}
.text-center > .fa-star:before,
.text-center > label:hover:before,
.text-center > label:hover ~ label:before {
content: "\f005";
}
</style>
<script>
function setRate(e) {
var a = e.target || e.srcElement, b = document.querySelector('#cause'), c = b.querySelector('textarea');
if(a.tagName=="INPUT") {
[].slice.call(a.parentNode.querySelectorAll('label')).reverse().forEach(function(e, i) {
a.value > i ? e.classList.add('fa-star') : e.classList.remove('fa-star');
});
if(a.value < 3 || document.querySelector('input:not([name='+a.name+']):checked').value < 3) {
b.style.display = 'block';
c.name = b.id;
c.required = true;
} else {
b.style.display = 'none';
c.name = '';
c.required = false;
}
}
}
</script>
</head>
<form autocomplete="off">
<body>
<label>Оценить сервис:</label>
<div class="text-center" onclick="setRate(event)">
<input id="s1" name="service" value="1" type="radio" />
<input id="s2" name="service" value="2" type="radio" />
<input id="s3" name="service" value="3" type="radio" checked="" />
<input id="s4" name="service" value="4" type="radio" />
<input id="s5" name="service" value="5" type="radio" />
<label for="s5" class="fa btn btn-default"></label>
<label for="s4" class="fa btn btn-default"></label>
<label for="s3" class="fa fa-star btn btn-default"></label>
<label for="s2" class="fa fa-star btn btn-default"></label>
<label for="s1" class="fa fa-star btn btn-default"></label>
</div>
<label>Оценить качество:</label>
<div class="text-center" onclick="setRate(event)">
<input id="q1" name="quality" value="1" type="radio" />
<input id="q2" name="quality" value="2" type="radio" />
<input id="q3" name="quality" value="3" type="radio" checked="" />
<input id="q4" name="quality" value="4" type="radio" />
<input id="q5" name="quality" value="5" type="radio" />
<label for="q5" class="fa btn btn-default"></label>
<label for="q4" class="fa btn btn-default"></label>
<label for="q3" class="fa fa-star btn btn-default"></label>
<label for="q2" class="fa fa-star btn btn-default"></label>
<label for="q1" class="fa fa-star btn btn-default"></label>
</div>
<div id="cause">
<label>Причина:</label><br />
<textarea></textarea>
</div>
</form>
</body>
</html>
