input錯誤提示，點擊提交，提示有未填項，屏幕滑到input未填項的位置

function errorInfo(parm) {
    //獲取文本框值
    var $val = parm.val();
    if ($val==""||undefined||null){
        //創建dom
        var errorHtml = $("<div class=\"fail-info-box\"><i class=\"fail-icon\"></i><span class=\"fail-txt\"> !</span></div>\n");
        var self = parm;
        //獲取提示文本值
        var name = self.attr("data-name");
        //添加高亮
        self.addClass("fontColr");
        self.css({"border-color":""});
        //顯示錯誤信息
        errorHtml.children(".fail-txt").html("您的"+name+"填寫錯誤!");
        //插入dom
        self.after(errorHtml);
        //插入之后並顯示
        errorHtml.show();
    }
}

//提交 下一步
function submitData(obj) {
    var $inputLen = $(obj).length;
    var $top;
    for(var i = 0;i<$inputLen;i++){
        //是否非空
        if($(".fail-info-input").eq(i).val()==""){
            //獲取 為空的input top值
            $top = $(".fail-info-input").eq(i).offset().top-50;
            //提示錯誤信息
            errorInfo($(".fail-info-input").eq(i));
            //添加高亮
            $(".fail-info-input").eq(i).addClass("fontColr");
            //滑到未填項 的位置
            $("html,body").animate({scrollTop:$top}, 500);
            return false;
        }
    }
}

 

頁面的錯誤提示  是動態創建的 插入到html 里，點擊下一步的時候，遍歷頁面所有需要校驗的input 並獲取所有的 input  top值 left值 用來顯示錯誤提示信息的位置，顯示的時候需要調用  errorInfo方法，並把input值為空的傳入進去 ，就可以了