非表单元素上的“泡泡”验证消息

我在页面上有一些元素，我想利用漂亮的泡沫样式消息，例如这里描述的HTML5 form validation。似乎要使用它们，它需要在表单元素中，并且只有在表单尝试提交后才能用于验证。非表单元素上的“泡泡”验证消息

从链接的例子考虑，我想知道如何得到下面所描述的工作（即在这个例子弹出一个气泡消息，如果用户之前现在设置一个时间）

<body> 
    <label> 
     Arrival Date: 
     <input id="arrivalDate" type="date" onchange="dateChanged()" /> 
    </label> 
    <input type="button" value="Test Reservation"></input> 

    <script type="text/javascript"> 
    function dateChanged(e){ 
     var arrivalDate = document.getElementById("arrivalDate"); 
     var value = new Date(arrivalDate.value); 
     if (value < new Date()) { 
      arrivalDate.setCustomValidity("Arrival date must be after now!"); 
     } else { 
      arrivalDate.setCustomValidity(""); 
     } 
     arrivalDate.checkValidity(); 
    } 
    </script> 
</body>

具体地，在我的情况下，我有正在使用2个KendoUI DateTimePickers选择其用于动态地在页面上显示的信息的时间段。如果用户在结束时间之后尝试启动时间，我希望能够使用这些气泡消息。

来源

2013-05-27 James

无法手动触发验证。使用.checkValidity()只会返回真/假，如果您的检查有效与否的上下文，即如果您确实检查所有表单元素是否有效，或者input.checkValidity()只检查该单个元素的有效性。

触发验证的唯一方法是提交。您可以通过提交按钮并调用click函数来模拟此操作。

if (!arrivalDate.checkValidity()) 
{ 
    document.getElementById('submit_reservation').click(); 
}

小提琴：http://jsfiddle.net/QGpQj/3/

注：我添加window.dateChanged = ....因为你的内联事件侦听器。你真的应该使用.addEventListener，或者，理想情况下，jQuery为此添加向不兼容的浏览器的兼容性支持。

来源

2013-05-27 11:57:38

所以没有办法使用这个没有窗体的弹出气球？ – James

@judgeja不幸的是没有。你有什么理由不想将它包装到表单中？ –

包装在表单中时，我的元素没有正确显示。我确定有一些简单的修复，但我找不到它。我使用的是knockoutJS（我是新来的），表单元素全部被显示在一个下面。 – James

非表单元素上的“泡泡”验证消息

回答

相关问题