警报栏而不是警报框 [英] Alert Bar rather than alert box

问题描述

我现在有一个脚本，防止用户在我的窗体的状态字段中输入任何东西，但状态缩写。感谢 gideon

I now have a script that prevents users from entering anything but a state abbreviation in the state field of my form. Thanks to gideon

我稍微修改了脚本包括当输入无效状态时的警报消息。但我不喜欢它。我要去一个警报栏，闪烁在页面的顶部，或者也许在字段下方。输入错误缩写时自动出现的某些内容，闪烁以抓住用户的注意力，并在几秒钟后消失。欢迎任何想法或想法！我非常开放的建议！再次感谢！

I modified the script just a little to include an alert message when an invalid state is entered. But I don't really like it. I am going for an alert bar that flashes on the top of the page or maybe right below the field. Something that appears automatically when an incorrect abbreviation is entered and flash to grab the users attention and disappear after a few seconds. Any ideas or thoughts would be welcome! I am VERY open to suggestions! Thanks once again!

我开始认为你的家伙不了解我。这是我有的代码：

I am starting to think you guy's are not understanding me. This is the code I have:

<script>
                        function validateState(el) {
                        //put all states in this array. 
                        var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
                    "FL","GA","GU","HI","IA",
                    "ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
                    "NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
                    "SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
                        for(var i=0;i< states.length;i++) {
                          if(el.value.toUpperCase() == states[i]) {
                            return true;
                          }
                        }
                        //clear element if it doesn't match a state
                        el.value = ""; //you could maybe do something else here.
                        alert('Invalid State Abbreviation, You must fix this before continuing')
                        document.getElementById("state").focus();
                        return false;
                    }
                    </script>

如果语句返回false，我想在屏幕上运行一个bar。

I am wanting to have a bar run across the screen if the statement returns false.

推荐答案

自适应@ Shawn的代码，你需要一个函数来显示栏和隐藏栏，我删除了代码， bar blink：

Adapting @Shawn's code, you'll need a function to show the bar and hide the bar, I've removed the code that makes the bar blink:

function ShowError(txt)
{
  $("#bar").show();
  $("#bar").text(txt);
  $("#bar").animate({
      top: 0
  }, 1500);
}
function ClearError()
{
   $("#bar").hide();
}

然后稍后您将执行：

if(el.value.toUpperCase() == states[i]) {
     ClearError();
     return true;
} else {
      ShowError("Please Enter a valid state");
}

查看整个代码： http://jsfiddle.net/grFT7/8/

为了让bar在某些时候消失，你可以这样做：

To make the bar disappear at some point you would do:

 setInterval(function () { $("#bar").hide(); }, 5000);
                           //hide the bar every 5 secs (5000 milliseconds).   

这篇关于警报栏而不是警报框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！