我正在为我们未来的产品之一编写着陆页,对此我有些麻烦


    <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浏览器的情况下,要准备好后备。但是铬像这样渲染

任何

最佳答案

浏览器的行为不同,如何呈现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>

09-25 15:18