最近我一直在做一个新项目，我决定使用 jQuery validate 插件进行 JavaScript 表单验证。
不幸的是，我遇到了一个问题，似乎每次我在文本框中输入一个字符时，都会触发成功事件。
看看我的 html 表单：-
<table id="tible">
<tr>
<td>
<center>
<label for="nom">Nom:<em class="red">*</em></label>
</center>
</td>
<td >
<input type="text" name="nom" id="nom" placeholder="nom ici" required data-rule-required="true" style="width:200px;" data-msg-required="Veuillez entrer votre Nom" data-msg-success="cool"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<center>
<label for="prenom">Prénom:<em class="red">*</em></label>
</center>
</td>
<td >
<input type="text" placeholder="prénom ici" name="prenom" required data-rule-required="true" data-msg-required="Veuillez entrer votre prénom(un seul suffit)" id="prenom" style="width:200px;"/>
</td>
<td></td>
</tr>
<tr>
<td>
<center>
<label for="email">Email:<em class="red">*</em></label>
</center>
</td>
<td >
<input type="email" name="email" id="email" required data-rule-required="true" data-rule-email="true" placeholder="Email ici" data-msg-required="Veuillez entrez votre adresse Email " data-msg-email="Veuillez entrez une adresse Email valide" style="width:200px;"/>
</td>
<td class="td2">
</td>
</tr>
<tr>
<td>
<center>
<label for="adresse">Adresse:<em class="red">*</em></label>
</center>
</td>
<td >
<input type="text" data-msg-required="Veuillez renseigner une adresse valide" data-rule-required="true" placeholder="Adresse ici" name="adresse" id="adresse" style="width:200px;"/>
</td>
<td class="td2"></td>
</tr>
<tr>
<td >
<center>
<label for="tel1">Téléphone 1:<em class="red">*</em></label>
</center>
</td>
<td>
<input type="text" data-msg-required="Veuillez entrer un numéro de téléphone (mobile/fixe)" data-rule-required="true" name="tel1" id="tel1" placeholder="Numéro principal ici" style="width:200px;"/>
</td>
<td class="td2"></td>
</tr>
<tr>
<td >
<center>
<label for="tel2">Téléphone 2:</label>
</center>
</td>
<td>
<input type="text" name="tel2" id="tel2" placeholder="Numéro secondaire ici" style="width:200px;"/>
</td>
<td class="td2"></td>
</tr>
<tr>
<td>
<center>
<label for="pays">Pays:<em class="red">*</em></label>
</center>
</td>
<td>
<select name="pays" id="pays" size="1" id="pays" style="width:200px;" data-rule-required="true" data-msg-required="Veuillez selectionner votre pays">
<option value="" selected>choisissez votre pays</option>
<option value="pays1"><?php echo 'Cote D\'ivoire'; ?></option>
</select>
</td>
<td class="td2"></td>
</tr>
<tr>
<td>
<center>
<label for="ville">Ville:<em class="red">*</em></label>
</center>
</td>
<td>
<select name="ville" id="ville" size="1" id="ville" style="width:200px;" data-rule-required="true" data-msg-required="Veuillez selectionner votre ville">
<option value="" selected>choisissez votre ville</option>
</select>
</td>
<td class="td2"></td>
</tr>
</table>
<div class="acceptance">
<!--<a href="#" onClick="document.getElementById('inscription').submit()" class="cusbtn" >Ok</a>--><input type="button" class="cusbtn" value="Ok" id="subinscrip"/> <input type="button" onClick="document.getElementById('inscription').reset()" class="cusbtn" value="Annuler" />
</div>
<center>
<p><em>" les champs ci-dessus contenant ce symbole <span class="red">*</span> sont à remplir obligatoirement. "</em></p>
</center>
</fieldset>
</form>
这是处理验证的 jQuery 片段
$("#inscription").validate({
errorPlacement: function (error, element) {
error.appendTo(element.parent().next());
},
highlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
success: function (label) {
label.html(" ").removeClass('error');
label.addClass('success');
}
});
$('#subinscrip').click(function () {
if ($("#inscription").valid()) {
$("#inscription").submit();
}
});
例如，当我在字段中输入一个字符时，"nom"它会自动显示有效图标，如果我继续输入字符，对于在第一个字符之后输入的每个字符，它将创建一个带有有效图标的新标签并将其显示在多行上，如图所示在下面的屏幕截图
中，我怎样才能阻止这种情况发生？谢谢