Simple Validation Test

by bdgriffiths

HTML

Please enter a number divisible by 6
<table>
  <tr>
    <td>Enter here:</td>
    <td>
      <input class="test2" id="tb1" style='width:50px' />
    </td>
    <td>
      <input class="test2" id="tb2" style='width:50px' />
    </td>
    <td>
      <input class="test2" id="tb3" style='width:50px' />
    </td>
  </tr>
</table>

<div id='validation' style="display:none">
  <div style="float:left" id="triangle-right"></div>
  <div id='errorMessage' style='float:left;padding:8px; font-size:0.8em; color:gray; text-align:center; width: 100px;background-color:#fff; border: solid 1px red'>
    Hang on!
  </div>
</div>

CSS

td {
  width: 80px;
  height: 60px;
}

.disabledClass {
  background-color: #eee;
  color: #ccc;
  border: 1px solid #ccc
}

body {
  font-family: arial;
}

#triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 8px solid red;
  border-bottom: 10px solid transparent;
}

JavaScript

$(document).ready(function() {

	 $(".test2").keyup(function(event){
   	if(event.keyCode==13){	
     	$(this).parent().next().find('.test2').focus();      
    }
   
   });

    $(".test2").blur(function() { 
      var valid = true;
      if (parseInt($(this).val()) % 6 != 0) {
        valid = false;
        $('#errorMessage').html("That's not divisible by 6");
      }
      if ((valid) || (!($(this).val()))) { // valid or blank
        // Hide error message and enable other text boxes
        $("#validation").fadeOut(500);
        $('input').not(this).removeClass('disabledClass');
      } else { // not valid
        // Show error message and disable other text boxes
        var position = $(this).position();
        $('input').not(this).addClass('disabledClass');
        $("#validation").fadeIn(500);
        $("#validation").offset({
          top: position.top,
          left: position.left + $(this).width()
        });
        $(this).focus().select();
      }
    });


      });