仅在提交表单之前填写必填字段的情况下,才能创建模式

时间:2018-10-20 18:06:07

标签: javascript html

我试图使模式出现,感谢用户提交表单,但前提是他们完全填写了所有必需的输入。我喜欢HTML内置的必需功能,但是当前两个弹出窗口均在按下“提交”按钮时发生。我知道是否需要if else语句,但是在弹出模式之前无法弄清楚如何显示JS中的必需字段。

      <!--   THIS IS THE CONTACT FORM SECTION   -->

<section class="contact-form">
  <h1 class="uptop">CONTACT ME</h1>
  <form method="get">
    <input type="text" class = "name required" id="name" placeholder="NAME" required>
    <input type="email" class="email required" id="email" placeholder="EMAIL" required>
    <textarea id="message" class="message required" rows="5" cols="300" placeholder="MESSAGE"></textarea>
    <input type="submit" class="submit" id="submit" value="Tell Me Something Good" >
  </form>
</section>


<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
  <span class="close">&times;</span>
  <p class ="modal-message">THANKS FOR THAT!</p>
  </div>
</div

JavaScript:

var modal = document.getElementById('myModal');
var btnSubmit = document.getElementById("submit");
var spanClose = document.getElementsByClassName("close")[0];
var requiredFields = document.getElementsByClassName("required").required;


btnSubmit.onclick = function() {
modal.style.display = "block";

}


spanClose.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
   if (event.target == modal) {
    modal.style.display = "none";
  }
}

1 个答案:

答案 0 :(得分:0)

我认为这可能会有所帮助 innerHTML会完成工作

function check(){
  var name = document.getElementById('name').value;
  if(name!=''){
    setStatus("Success");
  }else{
    setStatus("Error");
  }
}

function setStatus(message){
  var inputStatus = document.getElementById('msg');
  inputStatus.innerHTML = message;
}
  <input id='name' name='name' /><span id="msg"></span>
  <button type="submit" onClick="check()">Send</button>