Question

＆＃13;

function validate() {
  var fname = document.getElementById("fname").value;
  document.getElementById("errorfname").innerHTML = "";
  if (checkfname() == true) {
    alert("Entry submitted.");
  } else {
    return false;
  }
}

function checkfname() {
  var fname = document.getElementById("fname").value;
  if (fname.length == 0) {
    document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot be empty.";
    return false;
  } else if (!isNaN(fname)) {
    document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot contain numbers.";
    return false;
  } else {
    return true;
  }
}

function addRow() {
  if (validate() == true) {

  }
}

＆＃13;

<form>
  First Name:
  <input type="text" id="fname" name="fname" />
  <p id="errorfname" class="red"></p>
  <input id="submit" type="submit" value="Submit Entry" onclick="return addRow()" />
  <input id="clear" type="button" value="Reset" onclick="reset()" />
</form>

＆＃13;

<form>
  <fieldset>
    <label for = "firstnameinput">
      First Name: <input type = "text" id = "fname" name = "fname" placeholder = "John"/>
      <p id = "errorfname" class = "red"></p>
    </label>
  </fieldset>
  <fieldset>
    <label id = "submitbutton">
        <input id = "submit" type = "submit" value = "Submit Entry" onclick = "return addRow();upperCase();"/>
    </label>
    <label id = "resetbutton">
        <input id = "clear" type = "button" value = "Reset" onclick = "reset()"/>
    </label>
  </fieldset>
</form>

这是我简化的HTML文件。它基本上有一个输入和一个下面的段落，以便稍后显示错误消息。现在它设置为＆＃34;＆＃34;在javascript中。 HTML还有一个提交按钮和一个重置按钮。重置按钮的目的是清除所有先前输入的字段或出现的任何错误消息。

function validate(){
    var fname = document.getElementById("fname").value;
    document.getElementById("errorfname").innerHTML = "";
    if(checkfname() == true){
            alert("Entry submitted.");
        }
    else{
        return false;
    }

function checkfname(){
    var fname = document.getElementById("fname").value;
    if(fname.length == 0) {
        document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot be empty.";
        return false;
    }
    else if(!isNaN(fname)){
        document.getElementById("errorfname").innerHTML = "Invalid first name. Cannot contain numbers.";
        return false;
    }
    else{
        return true;
    }
}

function addRow(){
    if(validate() == true){
        event.preventDefault();
        var fname = document.getElementById("fname").value;
        firstNameArray.push(fname)

    var row = document.getElementById('table').insertRow(-1);
    var colNum = row.insertCell(0);
    var colName = row.insertCell(1);

    i++;

    colNum.innerHTML = i;
    colName.innerHTML = fname + " " + lname;

    else{
        return false;
    }
    reset();
}

最后，我的reset（）函数在下面。

function reset(){
    document.getElementById("errorfname").innerHTML = "";
    document.getElementById("fname").value = "";
}

问题是，例如，在fname的输入框中，我输入John。当我按下调用reset（）函数的HTML上的重置按钮时，框中的John消失了，所以我觉得这对我来说很好。但是，假设我故意将该框留空以收到错误消息，框下方的红色句子显示＆＃34;无效的名字。不能为空。＆＃34;当我按下重置按钮调用reset（）函数时，此红色错误消息不会消失，但是框内的任何当前值都会消失。这使得reset（）函数仅工作50％。我明确表示要在我的reset（）函数中消失。

TL; DR 我的HTML中有一个重置按钮，它在我的javascript中调用reset（）函数。我的HTML中有一个名称输入框，reset（）函数应该做的是删除框内的任何当前名称，并删除下面显示的任何错误消息。我的reset（）函数能够清除当前框内的任何名称，但无法清除错误信息。

Answer 1

我创造了一个小提琴来测试你的问题。我注意到了同样的事情。我将方法reset()更改为resetTest()，但效果很好。

working fiddle

更改名称的原因是onxyz=属性事件处理程序在几个with语句中运行（有效），其中一个是{{1} }。表单元素具有内置的with (theEnclosingFormElement)方法，可以将所有输入清除为其初始值。所以在这：

reset

被调用的<input id = "clear" type = "button" value = "Reset" onclick = "reset()"/>不是您的reset，而是表单的 reset，它当然不会reset做任何事情1}}。更改名称可消除冲突。

为什么我的reset（）函数没有删除我的红色错误行？

1 个答案: