Question

好的，所以我有这个表格，我用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并再次尝试去选择字段，然后只有Checkout字段与红色边框一起震动，让用户知道这是必填字段吗？

希望有人可以帮助实现这一点，将会欣赏它。

Answer 1

＆＃13;

$( document ).click(function() {
  $( "#toggle" ).effect( "shake" );
});

＆＃13;

#toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }

＆＃13;

<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>

＆＃13;

使用jqueryui点击事件，您可以使用shake effect

$（＆＃34;＃to＆＃34;）.effect（＆＃34; shake＆＃34;）。css（＆＃34; border＆＃34;，＆＃34; 2px solid red＆＃34;） ;

编辑

使用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
}

根据您的评论编辑，我已添加here的演示，请转到通过js的非常基本的配置来适应你的代码。

Answer 2

您希望为字段设置一些客户端验证，当它失败时，触发您希望发生的事件，这将是。

$('#button').click(function() {
  $( "#input" ).effect( "shake" ).css( "border", "2px solid red" );
});

摇动事件以显示必填字段表单字段？

2 个答案: