如何使箭头错误消息出现以使用jQuery / Java进行表单验证

Question

我想在代码中创建一个视觉化的想法，但是不知道该怎么做。

当用户填写表单时，如果他们出错了，我想显示一个礼貌的错误消息框，显示模糊（当他们离开文本框的焦点时）。

<script type="text/javascript">
        //Client-Side validation script:
        $(function () {
$("#<%=OtherBox.ClientID %>").blur(function () {
        //hmm...

        });
});
</script>

我知道我可能应该显示最初隐藏的某种div。 我希望这看起来既温和又现代，所以我想避免仅在其旁边出现某种红色文本。 它应该是一个指向文本框的箭头。

Answer 1

您可以创建一个元素，并在经过验证的元素旁边显示该元素：

$("#<%=OtherBox.ClientID %>").blur(function () {
    var $img = $('<img />',{
                     src : 'yoursrcofArrowImg',
                     class : 'error'
               });
    if(this.value === ""){
        $(this).after($img);
    }
});

演示@小提琴

---

根据您的评论，您可以使用data-*属性为不同的输入存储不同的消息：

data-msg="Plz fill your user name."

一个例子：

$("input").blur(function () {
    var $this = $(this);
    var $spn = $('<div />', {
        text: $(this).data('msg'),
        class: 'error'
    }).css({
        left: $this.width()+20,
        top: ($this.height()-$(this).height())/2
    });
    if (this.value === "") {
        $(this).after($spn);
    }
});

看到这个动作。

Answer 2

<script type="text/javascript">
    //Client-Side validation script:
    $(function () {
        $("#<%=OtherBox.ClientID %>").blur(function () {
          // just examine text box here
          if ($("#<%=OtherBox.ClientID %>").val()) == "somevalue" {
                 //do something
                 alert ("error");
           }
    });
    });
   </script>