Как сделать мою кнопку отправки красной, когда моя форма отправки не заполнена?

Question

У меня есть форма на моем сайте для людей, чтобы связаться со мной, даже если они просто хотят поговорить. Прямо сейчас вы можете отправить его без чего-либо. & Я не хочу, чтобы его спамали или заполняли дерьмом. Я пытаюсь выяснить, как только предоставить пользователю возможность отправить все заполненное &, если оно не позволяет им отправлять его & кнопка становится красной. Ranting, потому что «у меня слишком много кода, & не хватает информации Если я могу его поддерживать CSS & HTML только я был бы счастлив, но я понимаю, что существуют ограничения, поэтому иногда требуется JS или jQuery. Я их хорошо понимаю, Я просто хотел, чтобы бросить вызов себе. Во всяком случае, я очень много разглагольствований, потому что «у меня слишком много коды & должна попытаться добавить информацию на мой пост.» ....

Вот мой код с HTML5 CSS3 & :

HTML Здесь

<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 Здесь

 .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

Вы можете использовать атрибут :valid (и :invalid) в CSS в качестве селектора, который применяет стили, когда все элементы формы являются действительными.

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 вашего submit button: send.

$('#filed1').blur(function() { 
     if($("#field1").val() == "" || $("#field1").val() == null){ 
      $('#send').addClass('red'); 
    }else{ 
     $('#send').removeClass('red'); 
     } 
    }); 

Это должно сработать.