Question

最近我一直在研究一个新项目，我决定使用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&eacute;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&eacute;l&eacute;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&eacute;l&eacute;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"/>&nbsp;&nbsp;&nbsp;&nbsp;<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 &agrave; 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("&nbsp;").removeClass('error');
        label.addClass('success');

    }

});

$('#subinscrip').click(function () {
    if ($("#inscription").valid()) {
        $("#inscription").submit();
    }

});

当我在字段"nom"中输入一个字符时，它会自动显示有效图标，如果我继续输入字符，对于第一个字符后输入的每个字符，它将创建一个带有效图标的新标签并将其显示在多行上，如以下屏幕截图 problem 's screenshot 所示我怎么能阻止这种情况发生？感谢

Answer 1

导致问题的success回调不是errorPlacement回调函数。

errorPlacement: function (error, element) {
    error.appendTo(element.parent().next());
},

每次发生时你都会告诉它appendTo。 “附加”意味着它“已经”添加到已经存在的内容中。 .insertAfter()应该更接近你需要的......

errorPlacement: function (error, element) {
    error.insertAfter(element.parent().next());
},

您正在向后使用highlight回调函数...

highlight: function (element, errorClass) {
    $(element).removeClass(errorClass);
},

highlight回调是突出显示“错误”的原因。但是，您的代码正在移除 errorClass，尽管只有在出现错误时才会触发此回调。

此外，通常在使用highlight回调时，会使用unhighlight回调，以便在出现错误时正确切换。

highlight: function (element, errorClass) {
    $(element).addClass(errorClass);
},
unhighlight: function (element, errorClass) {
    $(element).removeClass(errorClass);
},

然后您错误地尝试使用success ...

切换这两个类

success: function (label) {
    label.html("&nbsp;").removeClass('error');
    label.addClass('success');
}

当你想在“有效”字段上显示消息success时，使用label回调。通常，当字段有效时，隐藏消息label。相反，应使用highlight和unhighlight回调函数切换这些类，success只应用于处理“有效”label内容。

highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass('success');
},
success: function (label) {
    label.html("&nbsp;");
}

这两个回调也采用了第三个名为validClass的参数，它通常是插件的默认“有效”类valid。由于您的名为success，因此您可以使用success选项将其更改为validClass ...

validClass: "success",
highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
},

最后，如果您修复了所有这些但仍希望在每次按键时禁用验证，请使用此选项...

onkeyup: false

请记住，永远不要将该选项设置为true，因为它会破坏默认功能。

请参阅文档：http://jqueryvalidation.org/validate/

每次输入字符时，jquery验证成功事件触发器

1 个答案: