Question

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

    <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会像 chrome-render

那样呈现它

任何

Answer 1

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

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

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

Answer 2

浏览器在呈现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>

Answer 3

这不会起作用，因为如果你禁用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控制visiblity。

这样可行，因为如果在浏览器中禁用了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>

没有javascript浏览器的Noscript形式后备

3 个答案: