表单跨越到 2 个单独的 div => 未正确验证答案

【问题标题】：Form is spanned into 2 seperate divs => not validating properly表单跨越到 2 个单独的 div => 未正确验证
【发布时间】：2016-12-08 06:59:50
【问题描述】：

我的表单如下所示：

我简化后的 in-lament 代码如下所示：

<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。请随时提交解决此问题的任何其他库。

已编辑：将表单移到破坏 div 之外。

【问题讨论】：

标签： jquery html forms validation jquery-validate

【解决方案1】：

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

<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】：

请注意，我已经检查过一个由 divs 完全没问题；在 stackoverflow 和其他论坛中注明。

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

见：Can't span form over multiple divs

【讨论】：

【解决方案3】：

我搞定了。

不仅仅是：

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

尝试写作：

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

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

【讨论】：

不，库在头部并在文档加载之前加载。