Question

I’m using jquery-validate to do some simple form validation on a page in conjunction with twitter bootstrap.

On Chrome it works perfectly with no lag, but on FireFox there is terrible lag with the text appearing much later than the keypress. Apart from that it works fine.

Here’s my code, am I doing something wrong?

<form class="form-horizontal" id="enrolform" method="post">  
<fieldset>
<legend>Enrolment Form <small>* required fields</small></legend>
<div class="control-group" >
  <label class="control-label" for="invite">Invite Code *</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="invite" id="invite"> 
  </div>
</div> 
<div class="control-group">
  <label class="control-label" for="first">First Name *</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="first" id="first" value="{{ first }}" >
  </div>
</div> 
<div class="control-group">
  <label class="control-label" for="last">Last Name *</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="last" id="last" value="{{ last }}">
  </div>
</div> 
<div class="control-group">
  <label class="control-label" for="email">Email Address *</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="email" id="email" value="{{ email }}" >
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="phone">Phone Number</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="phone" id="phone" class="required" value="{{ phone }}" >
  </div>
</div> 
<div class="control-group">
  <label class="control-label" for="mobile">Mobile Number</label>
  <div class="controls">
    <input type="text" class="input-xlarge" name="mobile" id="mobile" value="{{ mobile }}" >
  </div>
</div> 
<div class="form-actions">
    <button type="submit" class="btn btn-primary btn-large"\">Enrol</button> 
</div> 
</fieldset>
</form> 

<script>

$(document).ready(function(){

var validator = $('#enrolform').validate(
{
 rules: {
 invite: {
  minlength: 2,
  required: true
},
email: {
  required: true,
  email: true
},
first: {
  required: true
},
last: {
  required: true
},
phone: {
  digits: true
},
    mobile: {
  digits: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
  .text('OK!').addClass('valid')
  .closest('.control-group').addClass('success');
}
});
</script>

Answer 1

I suspect it because of the FireBug html debugger plugin.

I tried logging in from another machine without the firebug plugin installed and validation works like a charm.