0

我现在有一个脚本，可以防止用户在我的表单的状态字段中输入除状态缩写之外的任何内容。感谢吉迪恩

我稍微修改了脚本，以便在输入无效状态时包含一条警报消息。但我真的不喜欢它。我想要一个在页面顶部或字段正下方闪烁的警报栏。当输入不正确的缩写时自动出现的东西并闪烁以吸引用户的注意力并在几秒钟后消失。欢迎任何想法或想法！我非常愿意接受建议！再次感谢！

我开始认为你们不理解我。这是我的代码：

<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，我希望在屏幕上运行一个条形图。

4

3 回答 3

3

您可以简单地创建一个位于用户视图上方的元素（顶部：-100px 等）。进入无效状态后，您可以使用 jQuery 之类的库将其设置为顶部位置 0。您可以使用 setInterval() 内的简单条件语句使其闪烁；

我不确定您是否要使用 jQuery，但如果您这样做，那么您的代码将如下所示：

//if the input is not what you expect..
if(input != state){
    //drop the bar down
    $("#bar").animate({
            top: 0
    }, 1500);//drop it in 1500 milliseconds.
    //this is a lot like a loop that runs every 400 milliseconds.. 
    setInterval(function () {  <-------------------------------| 
        if ($("#bar").css("display") == 'none') {              |
            //if the bar is HIDDEN show it..                   |
            $("#bar").show();                                  |  
        } else {                                               | 
            //else hide it.                                    | 
            $("#bar").hide();                                  |
        }                                                      |
    }, 400);//<< EVERY 400 milli-seconds go here >-------------^
}

当然这只是一个例子，可以很容易地转换回传统的 JavaScript。

查看jsFiddle。

我希望这就是你要找的。

于 2013-02-04T03:17:11.460 回答
1

调整@Shawn 的代码，您需要一个函数来显示栏和隐藏栏，我已经删除了使栏闪烁的代码：

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/

要使该栏在某个时候消失，您可以：

 setInterval(function () { $("#bar").hide(); }, 5000);
                           //hide the bar every 5 secs (5000 milliseconds).
于 2013-02-04T05:14:59.370 回答
0

使用BootStrap 的警报。它易于使用且看起来很酷。

于 2013-02-04T04:24:00.550 回答