Question

我的表单如下所示：

我减少的内容代码如下所示：

<div class="row no-pad">
    <form class="form-control-static" action="lib/leadGen.php" method="post">
    <div class="col-xs-6 left-hand-input">

            <label for="firstName">FIRST NAME:</label><br>
            <input required name="firstName" id="firstName" type="text">
    </div>
    <div class="col-xs-6 right-hand-input">
        <label for="lastName">LAST NAME:</label><br>
        <input required name="lastName" id="lastName" type="text"><br>
    </div>
        </form>
</div>

我正在使用JQuery Validate 在添加库之后，我只是在正文关闭之前编写了这个脚本：

<script>
    $('.form-control-static').validate();
</script>

问题：它不会对input div上的任何.right-hand-input进行验证。请随意提交任何其他可以解决此问题的库。

已编辑：在破坏div之外移动了表单。

Answer 1

请注意我已经检查过一张表格 div完全没问题;在stackoverflow和其他论坛中提到。

这是不正确的。您的HTML无效。正在发生的事情是您的代码已关闭，因此right-hand-input中的所有内容都不属于form-control-static

请参阅：Can't span form over multiple divs

Answer 2

为什么你不做这样的事情？

<form class="form-control-static" action="lib/leadGen.php" method="post">

<div class="row no-pad">
    <div class="col-xs-6 left-hand-input">
            <label for="firstName">FIRST NAME:</label><br>
            <input required name="firstName" id="firstName" type="text">
    </div>
    <div class="col-xs-6 right-hand-input">
        <label for="lastName">LAST NAME:</label><br>
        <input required name="lastName" id="lastName" type="text"><br>
    </div>
</div>

</form>

并添加一些CSS以形成标签以正确反映内部DIV宽度

Answer 3

我明白了。

而不仅仅是：

$('.form-control-static').validate();

尝试写作：

window.onload=function(){
  $('.form-control-static').validate(); 
}

https://jsfiddle.net/sthlmsrille/d2hseLxe/

表单跨越2个单独的div =＆gt;没有正确验证

3 个答案: