使用图标验证输入字段一起发送错误消息

【问题标题】：Validation of input field with icon send error message all together使用图标验证输入字段一起发送错误消息
【发布时间】：2015-11-12 03:25:08
【问题描述】：

为什么所有的错误信息都聚集在一起，我不明白。

我需要这样的..

好的，我可以做到。这是我的演示代码。

 $('#contact-form').validate({
    rules: {
        fullname: {
            minlength: 4,
            required: true
        },
        username: {
            required: true,
            email: true
        },
        password: {
            minlength: 6,
            required: true
        },
        confirm_password: {
            minlength: 6,
            required: true,
            equalTo: "#password"
        },
        mobile: {
            minlength: 11,
            maxlength: 11,
            required: true,
            number: true
        },
        conditions: {
            required: true
        }
    },
    highlight: function (element) {
        var id_attr = "#" + $(element).attr("id") + "1";
        $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element) {
        var id_attr = "#" + $(element).attr("id") + "1";
        $(element).closest('.control-group').removeClass('has-error').addClass('has-success');
    },

    errorPlacement: function (error, element) {
        error.insertAfter(element.parent());
    }
});
 label.error {
            float: right!important;
        }
        
        .controls .error {
            color: red!important;
        }
        
        .controls .valid {
            color: green!important;
        }
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGD Tracking</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- for checking validation -->

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
</head>

<body>
    <div class="container">
        <br>
        <br>
        <br>
        <div class="col-md-3"></div>
        <div class="col-md-6">


            <form method="POST" class="form-horizontal" id="contact-form">
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                            <input type="text" id="fullname inputSuccess2" name="fullname" class="form-control" placeholder="Your name">
                        </div>
                    </div>
                </div>

                <br>
                <br>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
                            <input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                            <input type="password" name="password" id="password" class="form-control" placeholder="Your password">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                            <input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
                            <input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                 <div class="control-group">
                    <div class="controls">
                       <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-success btn-block" title="Submit"> Submit </button>
                        <br>
                        <input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" name="terms-and-conditions"> I agree to the <a href="#">terms and conditions</a>
                        <p class="help-block" style="display:none;"></p>
                    </div>
                </div>
               

            </form>
        </div>
        <div class="col-md-3"></div>

    </div>

但我的问题是，当我添加一个提交按钮并希望我的完整表单验证然后提交按钮将被启用，否则它应该从一开始就被禁用。 我也可以这样做：

$('#contact-form').on('keyup blur', function () {
    if ($('#contact-form').valid()) {
        if ($('#terms-and-conditions').click()) {
            $('button#emailSubmit').prop('disabled', false);
        } else {
            $('button#emailSubmit').prop('disabled', 'disabled');
        }
    }
});

但问题是在添加了这个之后，所有的错误信息都聚集在一起了。见：

      $('#contact-form').validate({
    rules: {
        fullname: {
            minlength: 4,
            required: true
        },
        username: {
            required: true,
            email: true
        },
        password: {
            minlength: 6,
            required: true
        },
        confirm_password: {
            minlength: 6,
            required: true,
            equalTo: "#password"
        },
        mobile: {
            minlength: 11,
            maxlength: 11,
            required: true,
            number: true
        },
        conditions: {
            required: true
        }
    },
    highlight: function (element) {
        var id_attr = "#" + $(element).attr("id") + "1";
        $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element) {
        var id_attr = "#" + $(element).attr("id") + "1";
        $(element).closest('.control-group').removeClass('has-error').addClass('has-success');
    },

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

$('#contact-form').on('keyup blur', function () {
    if ($('#contact-form').valid()) {
        if ($('#terms-and-conditions').click()) {
            $('button#emailSubmit').prop('disabled', false);
        } else {
            $('button#emailSubmit').prop('disabled', 'disabled');
        }
    }
});
   label.error {
            float: right!important;
        }
        
        .controls .error {
            color: red!important;
        }
        
        .controls .valid {
            color: green!important;
        }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- for checking validation -->

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

            <form method="POST" class="form-horizontal" id="contact-form">
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                            <input type="text" id="fullname inputSuccess2" name="fullname" class="form-control" placeholder="Your name">
                        </div>
                    </div>
                </div>

                <br>
                <br>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
                            <input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                            <input type="password" name="password" id="password" class="form-control" placeholder="Your password">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                            <input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
                            <input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                 <div class="control-group">
                    <div class="controls">
                       <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-success btn-block" title="Submit"> Submit </button>
                        <br>
                        <input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" name="terms-and-conditions"> I agree to the <a href="#">terms and conditions</a>
                        <p class="help-block" style="display:none;"></p>
                    </div>
                </div>
               

            </form>

【问题讨论】：

  • 你能提供一个小提琴链接吗？
  • 有很多代码要阅读。你能去掉一些不必要的代码吗？
  • 验证被添加到 keyup 的表单中，这似乎是所有输入都得到验证的原因。
  • 但是为什么所有的错误信息都聚集在一起？

标签： javascript jquery validation input-field


【解决方案1】：

不确定您是否正在寻找这种行为：

在highlight 和errorPlacement 函数中检查当前元素是否聚焦，以便只有当前聚焦的元素显示错误。

highlight: function (element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    if($(element).is(":focus")){
        $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
    }
},

errorPlacement: function (error, element) {
    if($(element).is(":focus")) {
        error.insertAfter(element.parent());
    }
}

小提琴：http://jsfiddle.net/yozn1kbb/1/

【讨论】：

  • 不，我需要那个，当我点击任何输入字段进行写入时，只会给我错误消息，其他字段应该是正常的。
猜你喜欢
  • 2017-01-11
  • 1970-01-01
  • 1970-01-01
  • 2012-05-22
  • 1970-01-01
  • 2015-09-19
  • 1970-01-01
  • 2021-03-13
  • 2011-02-03
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode