最近、私は新しいプロジェクトに取り組んでおり、jQuery 検証プラグインを使用して 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"に文字を入力すると、有効なアイコンが自動的に表示され、文字を入力し続けると、最初の文字の後に入力された文字ごとに、有効なアイコンで新しいラベルが作成され、示されているように複数の行に表示されます次のスクリーンショットで、
これを防ぐにはどうすればよいですか? ありがとう