[英]Change the CSS when there is a required element
我是一名学生开发人员，我想在单击提交按钮时显示一条消息，但仍然需要选择
<style>
.messagerequire {
color: red;
display: none;
}
</style>
<p class="messagerequire">Test, If there is a require to submit I appear ! </p>
这里它有样式display:none ，我想如果表单由于要求而没有验证，我会这样做，它会更改 CSS。
从今天早上开始我一直在寻找答案，但我还没有找到或理解。
<input type="submit" name="register" value="register">
谢谢
只需检查提交处理程序中的选择输入是否无效，然后更改该p元素的显示属性（在这种情况下是具有该类的第一个元素）。 不是最优雅的解决方案，而是最简单的解决方案：
var submitBtn = document.getElementById('submit'); submitBtn.addEventListener('click', function() { document.getElementsByClassName('messagerequire')[0].style.display = 'block'; })
<style> .messagerequire { color: red; display: none; } </style> <p class="messagerequire">Test, If there is a require to submit I appear !</p> <input type="submit" id="submit">
在我看来，更好的方法是使用两个类来显示和隐藏错误并动态切换p元素的类而不是修改它的样式。
您的代码应该如下所示。 因为您正在使用 input type=submit 所以在提交之前它应该验证。
function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { document.getElementById('error').style.display='block'; return false; } }
<style> .messagerequire { color: red; display: none; } </style> <form name="myForm" action="/page.php" onsubmit="return validateForm()" method="post"> <p class="messagerequire" id='error'>Test, If there is a require to submit I appear ! </p> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
您需要使用 JavaScript 来实现这一点。
function submitThis(){ let name = document.getElementById("name").value; if(name.length === 0){ document.getElementsByClassName("error")[0].innerText = "Cannot leve name empty."; //Removing(hinding) the error after 5 seconds. setTimeout(()=>{ document.getElementsByClassName("error")[0].innerText = ""; }, 5000); } }
.error { color: red; }
<input type="text" palceholder="Name" id="name" required /> <br> <br> <p class="error"></p> <br> <br> <button onclick="submitThis()">SUBMIT</button>
请你试试。
$('#submit').click(function(){ $('.messagerequire').css('display','block'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .messagerequire { color: red; display: none; } </style> <body> <p class="messagerequire">Test, If there is a require to submit I appear !</p> <input type="submit" id="submit"> </body>
当字符串与所需文本匹配时向元素添加 CSS 类 - JavaScript
[英]Add a CSS Class to an Element When A String Matches the Required Text - JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.