部分代码如下:
其中想被判断是否为空的select部分在41~68行
想要监听的submit在82行
想请教一下错误的地方以及如何改正
<?php include(get_user_header()); ?>
<div class="main_space">
<div class="container">
<div class="page-header">
<h1><?php echo $word->get('booking_detail_confirm'); ?></h1>
</div>
<div class="mainbox mb20">
<h3>予約内容確認</h3>
<?php if (isset($_POST["executeReserve"]) && $lesson_id > 0): ?>
<div class="sub-heading">
<?php if (!$b_can_modify): ?>
<p class="alert">レッスン開始<?php echo CAN_RESERVE_LESSON_BEFORE_MINUTE; ?>分前以降は変更ができません。</p>
<?php elseif($user_info->bh_user_id > 0): ?>
<p class="alert">予約内容の変更が完了しました。</p>
<a href="<?php echo get_path_bh_top(); ?>?app_id=<?php echo $lesson->app_id; ?>" class="btn btn-default center_link"><?php echo $word->get('course_top'); ?></a>
<?php endif; ?>
</div>
<?php else: ?>
<form id="form" action="" method="POST" class="mb20 while_error">
<div class="sub-heading">
<?php if ($modify): ?>
<?php if ($b_can_modify): ?>
<p>変更する場合は、ご希望のレッスンを選択し、「変更を確定」ボタンを押してください。</p>
<?php endif; ?>
<p>ご予約いただくレッスンは下記のとおりです。ご希望のレッスンを選択し、「予約する」ボタンを押してください。</p>
<?php endif; ?>
<h3 class="point">
<?php echo foundation::conversion_date($lesson->date); ?> <?php echo $lesson->start_time; ?>～<?php echo $lesson->end_time; ?>
</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center mb10">
<div class="b"><?php echo $lesson->tutor_dispname; ?></div>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<table class="table table table-bordered res-table-2col">
<tbody>
<tr>
<th><p>レッスン内容・教材</p></th>
<td>
<select size="1" id="textbook" name="textbook" class="form-control">
<?php if (empty($textbookid)): ?>
<option value="" selected>-- 選択してください --</option>
<?php else: ?>
<option value="">-- 選択してください --</option>
<?php endif; ?>
<?php foreach (getTextNames_JP_BH($user_info) as $id => $name): ?>
<?php if ($textbookid == $id): ?>
<option value="<?php echo $id; ?>" selected><?php echo $name; ?></option>
<?php else: ?>
<option value="<?php echo $id; ?>"><?php echo $name; ?></option>
<?php endif; ?>
<?php endforeach; ?>
</select>
</td>
</tr>
<tr>
<th><p>レッスン方法</p></th>
<td>
<select size="1" id="lesson_way" name="lesson_way" class="form-control">
<?php if (empty($lesson_way)): ?>
<option value="" selected>-- 選択してください --</option>
<?php else: ?>
<option value="">-- 選択してください --</option>
<?php endif; ?>
<option value="<?php echo LESSON_WAY_SKYPE; ?>" <?php echo (($lesson->lesson_way == LESSON_WAY_SKYPE)? 'selected':'') ?>><?php echo LESSON_WAY_SKYPE_STRJP; ?></option>
<option value="<?php echo LESSON_WAY_ZOOM; ?>" <?php echo (($lesson->lesson_way == LESSON_WAY_ZOOM)? 'selected':'') ?>><?php echo LESSON_WAY_ZOOM_STRJP; ?></option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="parallel_area">
<li>
<input type="button" onClick="history.back();" value="戻る" class="btn btn-default btn-lg btn-block">
<input type="hidden" name="lesson_id" value="<?php echo $lesson->id; ?>">
</li>
<?php if ($modify): ?>
<?php if ($b_can_modify): ?>
<li>
<input type="submit" id="executeReserve" name="executeReserve" value="変更を確定" class="btn btn-primary btn-lg btn-block">
</li>
<?php else: ?>
<div class="point mt5">
<span class="red2">レッスン開始<?php echo CAN_RESERVE_LESSON_BEFORE_MINUTE; ?>分前以降は変更できません。</span>
</div>
<?php endif; ?>
<?php else: ?>
<div id="textbook_no_selected" class="point">
「レッスン内容・教材」が未選択です。予約するには、「レッスン内容・教材」を選択してください。
</div>
<li>
<input type="submit" id="executeReserve" name="executeReserve" value="予約する" class="btn btn-primary btn-lg btn-block">
</li>
<?php endif; ?>
</ul>
</div>
</div>
</form>
<?php endif; ?>
</div>
</div>
</div>
<?php include(get_user_footer()); ?>
<style>
.while_error {
position: relative;
animation: shake .1s linear;
animation-iteration-count: 3;
}
@keyframes shake {
0% {
left: -5px;
}
100% {
right: -5px;
}
}
</style>
<script>
window.onload = function () {
function validate(e) {
var textbook = document.getElementById('textbook');
if (textbook.value.trim() == '') {
textbook.style.backgroundColor = '#ff4c4c';
textbook.classList.add('while_error');
setTimeout(function () {
textbook.classList.remove('while_error');
}, 300);
e.preventDefault();
} else {
textbook.style.backgroundColor = null;
}
var lesson_way = document.getElementById('lesson_way');
if (lesson_way.value.trim() == '') {
lesson_way.style.backgroundColor = '#ff4c4c';
lesson_way.classList.add('while_error');
setTimeout(function () {
lesson_way.classList.remove('while_error');
}, 300);
e.preventDefault();
} else {
lesson_way.style.backgroundColor = null;
}
}
document.getElementById('form').addEventListener('submit', validate);
}
</script>
目前实现value为空时的红色抖动validate效果，另外也想请教在刷新或者进入该页面的第一时间，forｍ元素中的内容也会抖动一下，请问如何避免这一事件， 以及在鼠标再次点击select的option时消除红色，谢谢
