填写表单时未触发 HTML 提交按钮答案

【问题标题】：HTML Submit Button not firing when form filled填写表单时未触发 HTML 提交按钮
【发布时间】：2014-08-09 11:58:13
【问题描述】：

我有一个未提交的新登录页面。 :(

如果我单击按钮但未输入必填字段，它会触发我返回错误，但一旦它们被填写并且我尝试提交它什么都不做。

该页面位于https://www.safewise.co.nz/trainwise/login

代码

<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
    <?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
    <div>
        <p id="login-title">Login</p>
        <input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
        <input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
        <div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
        <p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
        <div id="forgot"><p><a href="javascript:alert('Coming Soon')">Register</a></p><p><a href="#" data-reveal-id="forgotPass">Forgotten Password?</a></p>
    </div>
</form>
<div id="forgotPass" class="reveal-modal">
    <div class="modal-header"><h3>Forgot Password</h3></div>
    <div class="modal-body" style="text-align:center;">
    <form action="login.php" method="post" name="forgotForm" id="forgotForm" >            
        <p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
        <p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john@example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
    </form>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

奇怪的是，一旦我删除了这段代码，它就可以工作了。

<div id="forgotPass" class="reveal-modal">
    <div class="modal-header"><h3>Forgot Password</h3></div>
    <div class="modal-body" style="text-align:center;">
    <form action="login.php" method="post" name="forgotForm" id="forgotForm" >            
        <p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
        <p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john@example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
    </form>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

有什么建议吗？

【问题讨论】：

如果我输入 dfasds 并且您的表单验证了我的电子邮件 ID
@Mr.Alien，我已经更新了这个。它确实检查了服务器端。谢谢:)
已修复！我错过了一个 div。

标签： html forms form-submit

【解决方案1】：

该 div 在页面中的什么位置？在表单中包含表单是不正确的。因此，当您删除上面的 div 时，您的代码可能会起作用，因为您已经取出了第二种形式。考虑将它们作为两个单独的实体而不是嵌套。

【讨论】：

第一个表格之后。没有嵌套:) 我已经更新了上面的描述以显示代码

【解决方案2】：

这些表格是嵌套的吗？您不能有嵌套表单。一个页面中可以有多个表单，只要它们没有嵌套即可。

这里有一些关于它的参考http://www.w3.org/MarkUp/html3/forms.html

【讨论】：

当然没有嵌套表单。已经检查过了。 :)。我已经更新了上面的描述以显示代码
您在另一个表单中有一个表单。那就是嵌套形式。将您的从 forgotPass div 上方的 logForm 表单中移出。
抱歉，不应该这样。我没有正确关闭 div。

【解决方案3】：

我错过了一个结束 div

<div id="forgot">
    <p><a href="javascript:alert('Coming Soon')">Register</a></p> 
    <p><a href="#" data-reveal-id="forgotPass">Forgotten Password?</a></p>

最后需要一个结束 div

<div id="forgot">
    <p><a href="javascript:alert('Coming Soon')">Register</a></p>
    <p><a href="#" data-reveal-id="forgotPass">Forgotten Password?</a></p>
</div>

【讨论】：

如果是最合适的答案，您可以接受自己的答案。
@LegoStormtroopr 直到明天 :)