我正在为我们未来的产品之一编写着陆页,对此我有些麻烦
<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>