zoukankan      html  css  js  c++  java
  • jQuery-validate error messages in Twitter ...

    http://www.jefclaes.be/2012/11/jquery-validate-error-messages-in.html

    something satisfactory.
    In this example, I have a bootstrapped form that looks like this.

    @using (Html.BeginForm("ChangePassword", "Account", FormMethod.Post, new { @class = "form-horizontal"})) {
        <div class="control-group">
            <label class="control-label">Old password</label>
            <div class="controls">
                @Html.PasswordFor(m => m.OldPassword)                            
            </div>       
        </div>
        <div class="control-group">
            <label class="control-label">New password</label>
            <div class="controls">
                @Html.PasswordFor(m => m.NewPassword)                
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Confirm password</label>
            <div class="controls">
                @Html.PasswordFor(m => m.ConfirmPassword)                
            </div>                            
        </div>  
        <div class="control-group">
            <div class="controls">
                <button type="submit" class="btn btn-primary">Change password</button>
            </div>
        </div>
    }

    To make the error messages show up in tooltips on the input controls, I eventually ended up with the snippet below.

    $.validator.setDefaults({
        showErrors: function (errorMap, errorList) {
            this.defaultShowErrors();                            
    
            // destroy tooltips on valid elements                              
            $("." + this.settings.validClass)                    
                .tooltip("destroy");            
    
            // add/update tooltips 
            for (var i = 0; i < errorList.length; i++) {
                var error = errorList[i];
                             
                $("#" + error.element.id)
                    .tooltip({ trigger: "focus" })
                    .attr("data-original-title", error.message)                
            }
        }
    });

    I'm setting a custom showErrors function to extend the behaviour of the jQuery validator. I don't want to lose the default behaviour (highlighting etc), so I start with invoking the default showErrors function, to then destroy the tooltip on all valid input elements and to finally add or update the tooltip and its title on all invalid input elements. The errorList argument holds all the information I need for this; an array of invalid elements and their corresponding error messages.

    [Object, Object]
    > 0: Object
    >> element: <input>
    >> message: "The Current password field is required."
    > 1: Object
    >> element: <input>
    >> message: "The New password field is required."
    > length: 2

    The end result looks like this.

  • 相关阅读:
    Mysql一套完整练习题
    Ubuntu kylin优麒麟下配置Hive环境
    win10解决无法远程桌面连接问题(参考)
    OSI七层模型的工作协议划分
    20201116-每日一题
    20201115-福州大学-助教-周总结-第9次
    2020年11月学习记录
    20201104-福州大学-助教-周总结-第7次
    2020年10月学习记录
    20201025-福州大学-助教-周总结-第6次
  • 原文地址:https://www.cnblogs.com/dotnetmvc/p/3639514.html
Copyright © 2011-2022 走看看