jquery验证空错误消息

时间:2017-11-09 11:12:55

标签: jquery validation

我正在使用jquery validate验证表单,并希望仅向电子邮件字段显示错误消息。我试过这样的事情

 messages: {
                       txtFirstName: '',
                       txtDob: '',
                       txtPhone: '',
                       txtEmail: "Por favor ingrese una dirección de correo válida. Ej: nombre@servidor.com",
                       Privacyid: ''
                   }

错误消息显示在顶部,但是为每个元素创建了p标记。我只需要单独显示电子邮件的错误消息。

showErrors: function (errorMap, errorList) {
                    var msg = "<p>Your form contains " + this.numberOfInvalids() + " errors, see details below.</p>"
                        $.each(errorMap, function(key, value) {
                           msg += "<p>" + value + "</p>";
                        });
                    $("#errormessages").html(msg);

                    this.defaultShowErrors();  // default labels from errorPlacement
                    if (this.numberOfInvalids() > 0) {
                        $("#errormessages").show();
                    } else {
                        $("#errormessages").hide();
                    }
                }

1 个答案:

答案 0 :(得分:1)

只需删除showErrors属性并让插件创建错误元素,您可以使用errorElement属性指定错误标记:

&#13;
&#13;
$(document).ready(function() {

    $("#form").validate({
        errorElement: 'p',
        errorClass: 'error',
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Por favor ingrese una dirección de correo válida. Ej: nombre@servidor.com"
        }
    });


});
&#13;
.error {
  color: #ff0000;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<form id="form">
    <fieldset>
        <legend>validate only email field</legend>
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="email">Email (required)</label>
            <input id="email" type="email" name="email">
            
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </fieldset>
</form>
&#13;
&#13;
&#13;