如何替换表单验证中的错误消息

Question

我已经尝试过使用jquery.validate.min.js进行表单验证。

单击提交按钮时，错误消息将显示在空白字段中。

我的问题是。 我不想要该错误信息。 每个空白字段必须显示红色边框。 对此一无所知。

提前致谢

 jQuery(".contact_form").validate({ rules: { fname: { required: true, }, lname: { required: true, }, location: { required: true, }, phone: { required: true, }, mail: { required: true, mail: true }, subjct: { required: true, }, message: { required: true, }, }, submitHandler: function (form) { var postData = $(form).serializeArray(); var result = {}; $.each(postData, function () { result[this.name] = this.value; }); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <form class="contact_form" method="post"> <div class="row"> <input type="text" class="f_name" name="fname" placeholder="First Name *"> <input type="text" class="l_name" name="lname" placeholder="Last Name"> </div> <div class="row"> <input type="number" class="phone_number" name="phone" placeholder="Phone Number *"> <input type="email" class="mail_val" name="mail" placeholder="Email ID"> </div> <div class="row"> <input type="text" placeholder="Subject *" name="subjct" class="subjct_content"> <textarea class="form_textarea" name="message" placeholder="Message *"></textarea> <input type="submit" value="Submit"> </div> </form> 

Answer 1

尝试跟随

jQuery(".contact_form").validate({
        rules: {
            fname: {
                required: true,
            },
            lname: {
                required: true,
            },
            location: {
                required: true,
            },
            phone: {
                required: true,
            },
            mail: {
                required: true,
                mail: true
            },
            subjct: {
                required: true,
            },
            message: {
                required: true,
            },
        },
        submitHandler: function (form) {
            var postData = $(form).serializeArray();
            var result = {};
            $.each(postData, function () {
                result[this.name] = this.value;
            });
            return false;
        },
       errorPlacement: function(error,element) {
            return true;
         }
    });

或者您可以简单地将错误标签/跨度设置为以下样式

display:none

Answer 2

要将红色标记为空框，可以在validate函数中添加以下内容：

    invalidHandler: function(form, validator) {
               $('form input,textarea').each(function(){
                   if($(this).val() == ""){
                    $(this).css('border', '1px solid red'); 
                   }
               });
            }, 

    errorPlacement: function(){
                return false;  // suppresses error message text
            }