私は jquery-validate を使用して、twitter ブートストラップと組み合わせて、ページで簡単なフォーム検証を行っています。
Chrome ではラグなしで完全に動作しますが、FireFox では、キーを押すよりもはるかに遅れてテキストが表示されるというひどいラグがあります。それとは別に、それはうまく機能します。
これが私のコードです。何か間違っていますか?
<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>