如何验证隐藏的输入字段

Question

我正在验证隐藏字段。 当我提交空白条目时，它可以验证，但消息在表格顶部。 我正在尝试将此消息显示到其标签字段，但没有成功。

这里是代码。

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <form method="GET" action="#" style="margin-top: 100px; margin-left: 100px;">
    <label for="test123">Name : </label>
    <input type="text" style="display: none;" value="" required="" name="test123" id="test123">
    <button type="submit"> Submit</button>
    </form>
    <script type="text/javascript">
    $("label[for='test123']").click(function(){
        $("#test123").css('display','block');
    });
    </script>

单击名称标签后，将出现输入框。

Answer 1

不要隐藏它，只需将其不透明度设置为0。

$('#test123').css('opacity','0');

并再次显示：

$('#test123').css('opacity','1');

Answer 2

使用jQuery的.append（）将错误消息附加到DOM中，并在所需输入字段旁边。

$("form").on("submit", function(){
if(!isValid()){
var html = "<div style='color:#D50000'>Error</div>";
 $("#test123").append(html).show(); //show() to show the input element
}
});

SideNote ：使用Happy.js ，这是一个非常轻巧，易于使用的验证插件，可以解决您的问题。