Question

我的个人网站上有一个表格供人们联系我，即使他们只是想说话。现在你可以在没有任何东西的情况下提交它。我不希望它被垃圾邮件或垃圾填写。我试图弄清楚如何只让用户提交所有内容并填写完整内容。如果它不是让他们发送它＆amp;按钮变为红色。 Ranting因为＆＃34;我有太多的代码，＆amp;没有足够的信息。如果我可以保持CSS＆amp;只有HTML我很高兴，但我知道有限制因此有时需要JS或jQuery。我很了解他们，我只想挑战自己。无论如何，我非常咆哮，因为＆＃34;我有太多的代码＆amp;应该尝试在我的帖子中添加一些信息。＆＃34; ....

这是我的HTML5＆amp;代码CSS3：

HTML Here

<div class="contact">
  <div class="container">
    <h3>I love pen pals!</h3>
    <span>&#8212;</span>
    <form class="form" id="form1">
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
      </p>
      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
      </p>
      <p class="text">
        <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
      </p>
      <div class="submit to-the-right">
        <input type="submit" value="SEND"/>
      </div>
    </form>
  </div>
</div>

CSS Here

     .container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Monserrat', sans-serif;
}

.contact {
  background: white;
  margin: 5%;
  text-align: center;
}

.contact h3 {
color: rgba(144, 198, 149, 0.8);
}

.contact span {
color: rgba(144, 198, 149, 0.8);    
}

.contact form {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: white;
  width: 50%;
}

.name {

}

.name input {
  border: none;
  border-bottom: 1px solid #e4e4e4;
  margin: 5% 0% 5% 0%;
  width: 100%;
  background: white;
}

::-webkit-input-placeholder {
    color: rgb(189,195,199);
}
:-moz-placeholder {
   color: rgb(189,195,199);
   opacity:  1;
}
::-moz-placeholder {
   color: rgba (189, 195, 199);
   opacity:  1;
}
:-ms-input-placeholder {
   color: rgba (189, 195, 199);
}

.email {

}

.email input {
  border: none;
  border-bottom: 1px solid #e4e4e4;
  margin: 5% 0% 5% 0%;
  width: 100%;
  background: white;
}

.text {

}

.text textarea {
  border: none;
  border-bottom: 1px solid #e4e4e4;
  margin: 5% 0% 5% 0%;
  width: 100%;
  background: white;

}

.submit {
  margin-left: auto;
  margin-right: auto;
background: rgba(189, 195, 199, 1);
border: 0 none;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px; 
  color: white;
}

input[type=submit] {
    width: 100%;
background: transparent;
border: 0 none;
padding: 5px 15px;
border-radius: 5px;
 color: white;
}

input, select, textarea{
    color: rgba(144, 198, 149, 0.8);
}

textarea:focus, input:focus {
    color: rgba(144, 198, 149, 0.8);
    border: 1px solid rgba(144, 198, 149, 0.8);
}

.to-the-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-radius: 5px;
  color: white;
}
.to-the-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  background: rgba(144, 198, 149, 0.8);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  border-radius: 5px;
}
.to-the-right:hover, .to-the-right:focus, .to-the-right:active {
  color: white;
}
.to-the-right:hover:before, .to-the-right:focus:before, .to-the-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Answer 1

您可以使用CSS中的:valid（和:invalid）属性作为选择器，在所有表单元素都有效时应用样式。

form:invalid [type=submit] {
  background:red;
}

form:valid [type=submit] {
  background:lime;
}

<form>
  <input required>
  <input type="submit">
</form>

Answer 2

在.css文件中添加一个类，如下所示：

  .red
{
    background-color:red;
}

在每个字段上使用jQuery .blur并检查该字段是否为空:(假设您id的{{1}}为submit button 。

send

这应该有效。

如果我的提交表单未填写，如何将提交按钮设置为红色？

2 个答案: