好的，所以我有这个表单，我用 onclick 事件验证它并在更改时提交
<form action="reservation.php" method="post">
<input class="date" id="from" name="from" type="text" value="<?php echo $from; ?>" onclick="document.getElementById('to').removeAttribute('disabled')" >
<h5>Checkout</h5>
<input class="date" id="to" name="to" type="text" value="<?php echo $to; ?>" disabled onclick="document.getElementById('room_type').removeAttribute('disabled')">
<h5>Room</h5>
<select id="room_type" name="room_type" class="frm-field required" onChange='this.form.submit()' disabled>
<option value="" selected="selected" disabled="disabled">Select</option>
<option value="Delux">Deluxe Rooms</option>
<option value="Executive">Executive Rooms</option>
<option value="Suite">Suites</option>
</select>
<noscript><input type="submit" name="submit" value="Check"/></noscript>
</form>
假设有人试图立即点击房间选择字段，然后 Checkin 和 Checkout 字段出现红色边框，如果有人已经为 Checkin 字段选择了值但没有尝试点击 Checkout 并再次尝试去选择字段，然后只有结帐字段带有红色边框，让用户知道这是必填字段？
希望有人能帮助实现这一目标，我们将不胜感激。
最佳答案
$( document ).click(function() {
$( "#toggle" ).effect( "shake" );
});#toggle {
width: 100px;
height: 100px;
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle"></div>
</body>
</html>在使用 jqueryui 的点击事件中，您可以使用 shake effect
$( "#to").effect( "shake").css( "border", "2px solid red");
编辑
另一种使用 animation css 的解决方案:-
<button id="shakebtn">shake</button>
<input class="date" id="to" name="to" type="text" value="<?php echo $to; ?>" disabled onclick="document.getElementById('room_type').removeAttribute('disabled')">
<script type="text/javascript">
$('#shakebtn').click(function(){
$('#to').removeClass().addClass('animated shake borderred').one('webkitAnimationEnd oAnimationEnd', function(){
$(this).removeClass();
});
});
</script>
css 会是
.borderred {
border:2px solid red
}
EDIT as per your comment i have added a demo from here please go through for very basic configuration with js to fit in your code.
关于jquery - 摇动事件以显示必填字段的表单字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35946401/