草庐IT

javascript - 带有图标的输入字段验证工作不顺利

coder 2025-01-06 原文

当我的图标位于 input-lg 内部时,当我单击该字段时,它看起来像......我的意思是我的评论应该在这里,但它不应该使图标变大。 我需要评论会出现,但在图标和输入 lg 字段之外。

这是我的演示代码:

$(document).ready(function () {
    $('#contact-form').validate({
        rules: {
            fullname: {
                minlength: 4,
                required: true
            },
            username: {
                required: true,
                email: true
            },
            password: {
                minlength: 8,
                required: true
            },
            confirm_password: {
                minlength: 8,
                required: true
            },
            mobile: {
                minlength: 11,
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });
});
<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>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<div class="container">
    <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" name="fullname" id="fullname" class="form-control" placeholder="Your name">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

        <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>
        <p class="help-block"></p>

        <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>
        <p class="help-block"></p>

        <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>
        <p class="help-block"></p>

        <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>
        <p class="help-block"></p>

    </form>
</div>

我需要这样的:

最佳答案

使用errorPlacementinsertAfter

$('#contact-form').validate({        
   errorPlacement: function(error, element) {
       error.insertAfter(element.parent());
   }
});

FIDDLE

此外,自定义消息可以像这样完成:-

$('#contact-form').validate({
     rules: {
         fullname: {
             minlength: 4,
             required: true
         }
     },
     messages: {
         fullname:{
              required: "Required input",
              minlength: jQuery.validator.format("Too short: Minimum of {0} characters")
         }
     }
});

FIDDLE

关于javascript - 带有图标的输入字段验证工作不顺利,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33591911/

有关javascript - 带有图标的输入字段验证工作不顺利的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  4. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  5. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  6. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  7. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  10. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

随机推荐