表单分为 2 个单独的 div => 未正确验证

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>

问题： 它不验证 .right-hand-input div 上的任何 input。请随时提交解决此问题的任何其他库。

EDITED: moved form outside of breaking divs.

Answer 1

Please take note that i've already checked that a form separated by divs is perfectly fine; noted in Whosebug and other forums.

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

的一部分

参见：Can't span form over multiple divs

Answer 2

我成功了。

而不只是：

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

尝试写：

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

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

Answer 3

你为什么不做这样的东西？

<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 宽度

表单分为 2 个单独的 div => 未正确验证

Form is spanned into 2 seperate divs => not validating properly

html

forms

validation

jquery

jquery-validate