0

我正在为我们未来的一款产品编写一个登陆页面，但我遇到了一些麻烦

    <form novalidate method="POST" class="subscribe-form">
    <noscript>
      </form>
      <form method="POST" action="/" class="subscribe-form">
    </noscript>
      <input type="email" placeholder="{subscribe-status}" class="input-lg" name="email">
      <input type="text" value="general" class="hidden" name="interest" class="interest-field">
      <input type="submit" value="Let me know!" class="btn btn-blue btn-lg" data-location="header">
    </form>
    <span class="hint">*Prepare to be amazed. We promise we won't spam you.</span>

这个想法是为支持浏览器的 js 定义表单并准备好进行客户端验证，但在 noscript 浏览器的情况下准备好后备。但是chrome会这样渲染铬渲染

任何

4

3 回答 3

2

HTML 无效；不同的浏览器可能会以不同的方式呈现它。W3C 验证器是您的朋友：http: //validator.w3.org/

如果 JS 被关闭，你的验证将不会运行，你真的不需要对此做任何事情；只需编写一个表格并将其用于两种情况。如果您需要/想知道服务器端是否已运行客户端验证，<input type="hidden" name="clientvalidated" value="false">请在您的表单中包含并使用 JS 将 value 属性更改为 true。

请注意，无论如何您都必须在服务器上进行验证，因为客户端是不受信任的。

于 2014-07-21T09:22:21.390 回答
1

浏览器有不同的行为如何渲染 DOM

一种选择是使用 javascript 打开/关闭 noValidate

<form id="myForm" novalidate method="POST" class="subscribe-form">
    <script> document.getElementById("myForm").noValidate = true; </script>
    <input type="email" placeholder="{subscribe-status}" class="input-lg" name="email">
    <input type="text" value="general" class="hidden" name="interest" class="interest-field">
    <input type="submit" value="Let me know!" class="btn btn-blue btn-lg" data-location="header">
</form>
<span class="hint">*Prepare to be amazed. We promise we won't spam you.</span>

另一个是用 css 切换 js/no-js 元素的可见性

<style>
    .myclass { 
        /* CSS code for all versions of your page goes here */
    }

    .js .myclass {
        /* This CSS code will only show up if JS is enabled */
    } 

    .no-js .myclass {
        /* This CSS code will only show up if JS is disabled. */
    }
</style>

<script>
    // Remove "no-js" class from <html> element, if it exists:
    var docElement = document.documentElement;
    docElement.className = docElement.className.replace("no-js", "js");
</script>
于 2014-07-21T09:17:00.037 回答
0

这不起作用，因为如果您禁用了 javascript，它将生成 3 个标签（和

将 2 种形式合并为一种形式，这种形式不是很干净，并且可能会产生不必要的副作用。

我建议你这样做，创建 2 个完整的表格，用 ID 标记它们。JavaScript 版本应默认隐藏。然后 JavaScript 应该只在 JavaScript 工作时执行必要的更改。

<form id="this_is_for_javascript_mode" method="post" style="display: none;">
    -put form content here...-
</form>

<form id="this_is_for_non_javascript_mode" method="post">
    -put form content here...-
</form>

然后通过 JavaScript 简单地控制可见性。

这将起作用，因为如果在浏览器中禁用 JavaScript id，则不会执行脚本标记！

<script type="text/javascript>
    $("#this_is_for_non_javascript_mode").remove(); //Remove non-js version
    $("#this_is_for_javascript_mode").css("display", "block"); //Make js version visible
</script>
于 2014-07-21T09:16:05.643 回答