Can a shake event be utilized to indicate necessary form fields?

Question

Can a shake event be utilized to indicate necessary form fields?

Hey, so I'm working with this form and implementing validation using the onclick event and submitting on change.

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

If someone attempts to click directly on the Room select field, both the Checkin and Checkout fields will shake with a red border. However, if someone selects a value for the Checkin field but doesn't interact with the Checkout field before going to the select field, only the Checkout field will shake with a red border, indicating it is a required field.

Any help in achieving this would be greatly appreciated!

jquery html css validation

Answer 1

Answer №1

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

When a click event is triggered with jQuery UI, you can apply the shake effect.

$( "#to" ).effect( "shake" ).css( "border", "2px solid red" );

EDIT

Another alternative is using 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 styling:

.borderred {
    border:2px solid red
}

Based on your comment, I have included a demo from here. Please review for simple setup with JavaScript that fits within your code structure.

Answer 2

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

When a click event is triggered with jQuery UI, you can apply the shake effect.

$( "#to" ).effect( "shake" ).css( "border", "2px solid red" );

EDIT

Another alternative is using 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 styling:

.borderred {
    border:2px solid red
}

Based on your comment, I have included a demo from here. Please review for simple setup with JavaScript that fits within your code structure.

Answer 3

Answer №2

Implementing client-side validation is crucial to ensure data accuracy and user experience. In case of validation failure, it's important to trigger specific events to handle the errors smoothly.

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

Answer 4

Implementing client-side validation is crucial to ensure data accuracy and user experience. In case of validation failure, it's important to trigger specific events to handle the errors smoothly.

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

Can a shake event be utilized to indicate necessary form fields?

Answer №1

Answer №2

Similar questions

Why is External Interface in Flash no longer supported in IE11?

I'm experiencing an issue with the sub-menu disappearing and preventing me from clicking on any links

A parameter value is needed for the Controller - Error 500: Internal server hiccup

Numbering updated on pagination

Elevate your website design with Bootstrap by placing a fixed horizontal navigation bar above all

Utilizing JQuery to display JSON data on a data table using Ajax

What is the best way to eliminate the empty space at the bottom of my Bootstrap site?

Implementing Ajax with multiple div elements

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

What could be causing my jQuery to malfunction after I include the .sqrt() function?

The lack of vertical alignment in the table

Eliminate inner margin from the canvas of a bar chart created with ChartJS

Unable to change background color in iPhone layout

Bootstrap 4: Arrange input fields in a horizontal layout

What is the best way to handle a quote within a double quotation mark?

Keep the span's width constant even when it is empty

Is it possible for SESSION variables to have delays when being set or unset?

What is the best way to conceal floated elements with overflow in CSS?

Transforming the text color after clicking on it on Squarespace - here's how to do it!

Loop through 3 items in jQuery and repeat each item by decrementing it