Измените CSS, когда есть обязательный элемент - PullRequest
Новая
       1

Измените CSS, когда есть обязательный элемент

0 голосов
/ 23 января 2020

Я студент-разработчик, и я хотел бы, чтобы при нажатии кнопки «Отправить» появилось сообщение, но все еще требуется выбрать 

<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">

Спасибо

Ответы [ 4 ]

0 голосов
/ 23 января 2020

Пожалуйста, попробуйте. 

 $('#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>
0 голосов
/ 23 января 2020

Ваш код должен быть примерно таким, как показано ниже. потому что вы используете тип ввода = отправить, поэтому перед отправкой его следует проверить. 

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>
0 голосов
/ 23 января 2020

Вам нужно использовать 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>
0 голосов
/ 23 января 2020

Просто проверьте, является ли выбранный ввод недопустимым в вашем обработчике отправки, затем измените свойство display для этого элемента 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 elements вместо изменения его стили.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...