html5表单验证 触发,触发标准的HTML5validation（表单），而不使用提交button？

简短的回答，不，在提交表单之前，没有办法“内嵌”触发html5气泡的默认function，您可以在某些input上checkValidity() ，但不能按照您的需要进行操作。 如果您仍想在validation完成后提交表单，则可以通过执行以下操作来处理此样式：

请注意，在表单上，​​您不希望应用validationCSS样式，只需将novalidate属性添加到表单。

HTML：

如果你不使用SCSS，那么我强烈build议你去查看它，它更易于pipe理，易于编写，而且不太复杂。 注意：在小提琴的例子中，我确实有精确的CSS，这将编译。 我还包括一个泡沫样式的例子。

SCSS：

form:not([novalidate]) { input, textarea { &:required {background: transparent url('/../..http://img.dovov.comicons/red_asterisk.png') no-repeat 98% center;} &:required:valid {background: transparent url('/../..http://img.dovov.comicons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;} &:not(:focus):valid {box-shadow: none;border: 1px solid $g4;} &:focus:invalid {background: transparent url('/../..http://img.dovov.comicons/invalid.png') no-repeat 98% center; @include box-shadow(0 0 5px #d45252); border-color: #b03535} } } span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2)); &:after { @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px; } .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;} }

JAVASCRIPT：

在这里，我们可以做一些时髦的东西来使用默认消息，并在你自己的“泡泡”或错误消息框中inheritance它们。

var form = $('form'); var item = form.find(':invalid').first(); var node = item.get(0); var pos = item.position(); var message = node.validationMessage || 'Invalid value.'; var bubble = $('').html('' + message + '

X

').contents(); bubble.insertAfter(item);

DEMO：

喜欢，我希望我能帮助其他人使用HTML5表单validation，因为它很棒，而且需要走出去！

香农