Question

嘿，大家读这篇！我正在尝试验证表单，并让该文本字段显示以防万一。它的确显示了，但是时间太多了，我不知道为什么计数器不起作用。欢迎任何想法...谢谢！

// For checking if the fields are filled and creating an html element
var newP = document.createElement("p");
var alertText = document.createTextNode("You should fill both fields!");
newP.appendChild(alertText);
var counter = 0;
// Declaring the canvas
var canvas = document.getElementById("draw");
var ctx = canvas.getContext('2d');
var formValue = document.getElementById("gameForm");
var submit = document.querySelector("#submitGameForm");

submit.addEventListener('click', function(e){ e.preventDefault(); validateForm();});

//global machen
function validateForm(){
  var name = document.getElementById("name").value;
  var hours = document.getElementById("hours").value;
  var expressionName = new RegExp("^[a-zA-Z\s]+$");
  var expressionHours = new RegExp("[0-9 ]+");
  var correct = true;
  var showMessage = false;

  //Test if empty
  if(name == "" || name == null || hours == "" 	|| hours == null){
   showMessage= true;
   correct= false;	
  }

  if(showMessage && counter == 0){
     formValue.appendChild(newP);
    console.log(newP);
     counter++;
  }

  if(!expressionName.test(name)) {
    document.getElementById("name").style.background='#8e3733';
    correct = false;

  }
  else{
    document.getElementById("name").style.background='#FFFFFF';

  }

  if(!expressionHours.test(hours)) {
    document.getElementById("hours").style.background='#8e3733';
    correct = false;
  }
  else{
    document.getElementById("hours").style.background='#FFFFFF';
  }
}

<main class="game" id="mainIndex">
<div class= "divGameForm">
   <h2>Confess in order to play</h2>
   <form id="gameForm">
      <label for="name">Enter your name:</label>
      <input id="name" type="text" >
      <label for="hours">How many hours per day do you spend playing?</label>
      <input id="hours" type="text" >
      <p>Press the button if you would like to increase them!</p>
      <input id="submitGameForm" type="submit" value="Submit" >
   </form>
</div>
<div class="divGame">
<canvas id="draw"> </canvas>
<div>
<p>You can only draw circles. The dimentions are 240 (width) and 300 (height). Try it out!s</p>
<label for="xPos">Enter value for x: </label>
<input id="xPos" type="text">

Answer 1

您可以使用counter在测试场景中将其作为counter ++，然后将showmessage和counter> 0更改为空

var newP = document.createElement("p");
var alertText = document.createTextNode("You should fill both fields!");
newP.appendChild(alertText);
var counter = 0;
// Declaring the canvas
var canvas = document.getElementById("draw");
var ctx = canvas.getContext('2d');


var formValue = document.getElementById("gameForm");

var submit = document.querySelector("#submitGameForm");
submit.addEventListener('click', function(e) {
e.preventDefault();
validateForm();
});

//global machen
function validateForm() {
var name = document.getElementById("name").value;
var hours = document.getElementById("hours").value;
var expressionName = new RegExp("^[a-zA-Z\s]+$");
var expressionHours = new RegExp("[0-9 ]+");
var correct = true;
var showMessage = false;



//Test if empty
if (name == "" || name == null || hours == "" || hours == null) {
    showMessage = true;
    correct = false;
    counter++;
}

if (showMessage && counter > 0) {
    formValue.appendChild(newP);
    console.log(newP);


}

if (!expressionName.test(name)) {
    document.getElementById("name").style.background = '#8e3733';
    correct = false;

} else {
    document.getElementById("name").style.background = '#FFFFFF';

}
if (!expressionHours.test(hours)) {
    document.getElementById("hours").style.background = '#8e3733';
    correct = false;
} else {
    document.getElementById("hours").style.background = '#FFFFFF';
}
}

自定义表单验证消息

1 个答案: