pop up and validate

pop up and validate

I have the link opens this is the pop-up page where  user needs to update the  lotNo into the text box.  Once they enter the number in, hit update and close this pop up page.  I've tried to enter 50, got the message
 "Please enter a value less than or  qual 30"  which is correct since the max is 30.  However, it's still let me hit the update button?   the button can't submit w/o enter the correct number, is there the way to disable or hide the submit button if form validated is failed?
Please help !!!
thanks

 < cfform action="" method="post"  name="details" id="details">
  < cfinput id=" lotNo" type="text" name=" lotNo" value="" size="2"  maxlength="2" /> 
  <cfinput type="submit" name="submit" id="update" value="Update" class="button1" onClick="CloseAndRefresh()">
 </ cfform>
 
< script Language="JavaScript">

function CloseAndRefresh ()
  {
    opener . location .reload (true);
      self . close ();
  }
  
 // validate  lot
    $ (document) .ready (function () {
        $ ( "#details" ) . validate ({
      rules: {
                lotNo: {required: true, number :true ,max: 30}
        
            }
        });
    });
 </ script>