10

请更正以下代码，它没有按预期工作，即当用户输入无效名称时，我需要在表单中的文本字段旁边显示一条错误消息

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>
4

11 回答 11

9

试试这个代码

<html>
<head>
 <script type="text/javascript">
 function validate() {
  if(myform.fname.value.length==0)
  {
document.getElementById('errfn').innerHTML="this is invalid name";
  }
 }
 </script>
</head>
<body>
 <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn">   </div>

<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>

<br>
<input type=button value=check> 

</form>
</body>
</html>
于 2013-02-05T07:43:49.650 回答
6

我同意@ReNjITh.R 的回答，但如果你想在文本框旁边显示错误消息。就像下面一样

在此处输入图像描述

<html>
<head>
<script type="text/javascript">
    function validate() 
    {
        if(myform.fname.value.length==0)
        {
           document.getElementById('errfn').innerHTML="this is invalid name";
        }
    }
</script>
</head>
<body>
    <form name="myform">
         First_Name
         <input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span>
        <br> <br>
         Last_Name
         <input type=text id=lname name=lname onblur="validate()"/><br>
         <input type=button value=check /> 
    </form>
</body>

于 2013-02-05T08:17:16.413 回答
5

网站管理员或网络程序员，请插入

<!DOCTYPE html>

在页面的开头。其次，您应该用引号将您的属性括起来，例如

type="text" id="fname"

输入元素不应包含结束元素，只需将其关闭即可：

 />

输入元素没有innerHTML，它有或者value你的javascript行应该是：

document.getElementById("fname").value = "this is invalid name";

请以有条理的方式书写，并确保其符合标准。

于 2013-02-05T07:41:07.203 回答
2

你可以这样试试

 <html>
          <head>
          <script type="text/javascript">
          function validate() 
          {
            var fnameval=document.getElementById("fname").value;
            var fnamelen=Number(fnameval.length);
               if(fnamelen==0)
               {
                  document.getElementById("fname_msg").innerHTML="this is invalid name ";
                }
            }
          </script>
          </head>
          <body>
          <form name="myform">
          First_Name
          <input type=text id=fname name=fname onblur="validate()"> </input>
           <span id=fname_msg></span>
          <br> <br>
          Last_Name
          <input type=text id=lname name=lname onblur="validate()"> </input>

          <br>
          <input type=button value=check> 

          </form>
          </body>
        </html>
于 2013-02-05T07:30:12.957 回答
1

你也可以试试这个

<tr>
    <th>Name :</th>
    <td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td>
</tr>



    function register_validate()
{
    var name = document.getElementById('name').value;
    submit = true;
    if(name == '')
    {
        document.getElementById('name_error').innerHTML = "Name Is Required";
        return false;
    }
    return submit;
}
document.getElementById('name').onkeyup = removewarning;
function removewarning()
{
    document.getElementById(this.id +'_error').innerHTML = "";
}
于 2016-10-13T06:57:55.677 回答
0

You should use .value and not .innerHTML as it is a input type form element

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").value="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>
于 2013-02-05T07:57:46.237 回答
0

首先，您尝试写入输入字段的 innerHTML。这行不通。您需要有一个 div 或 span 来写入。尝试类似：

First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<div id="fname_error"></div>

然后将您的验证功能更改为读取

if(myform.fname.value.length==0)
    {
    document.getElementById("fname_error").innerHTML="this is invalid name ";
    }

其次，我总是对使用 onBlur 做这种事情犹豫不决。可以在不退出字段（例如返回键）的情况下提交表单，在这种情况下您的验证代码将不会被执行。我更喜欢从提交表单的按钮运行验证，然后仅当文档通过验证时才从函数内调用 submit()。

于 2013-02-05T07:41:09.373 回答
0

在这里设置输入值的 innerHtml 不会有任何好处，请尝试使用其他元素（如 span），或者只显示以前制作的隐藏错误消息。您可以设置名称字段的值。

<head>
    <script type="text/javascript">
        function validate() {
            if (myform.fname.value.length == 0) {
                document.getElementById("fname").value = "this is invalid name ";
                document.getElementById("errorMessage").style.display = "block";
            }
        }
    </script>
</head>

<body>
    <form name="myform">First_Name
        <input type="text" id="fname" name="fname" onblur="validate()"></input> <span id="errorMessage" style="display:none;">name field must not be empty</span>

        <br>
        <br>Last_Name
        <input type="text" id="lname" name="lname" onblur="validate()"></input>
        <br>
        <input type="button" value="check" />
    </form>
</body>

小提琴

于 2013-02-05T07:36:22.297 回答
0

尝试这个

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("error").innerHTML="this is invalid name ";
   document.myform.fname.value="";
   document.myform.fname.focus();
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type="text" id="fname" name="fname" onblur="validate()"> </input>
<span style="color:red;" id="error" > </span>
  <br> <br>
  Last_Name
  <input type="text" id="lname" name="lname" onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>
于 2013-02-05T08:02:48.367 回答
0

试试这样：

function validate(el, status){
     var targetVal = document.getElementById(el).value;
     var statusEl = document.getElementById(status);
     if(targetVal.length > 0){
        statusEl.innerHTML = '';
  }
     else{
        statusEL.innerHTML = "Invalid Name";
   }
}

现在HTML：

<!doctype html>
<html lang='en'>
<head>
<title>Derp...</title>
</head>
<body>
<form name="myform">
  First_Name
  <input type="text" id="fname" name="fname" onblur="validate('fname','fnameStatus')">
  <br />
  <span id="fnameStatus"></span>
  <br />
  Last_Name
  <input type="text" id="lname" name="lname" onblur="validate('lname','lnameStatus')"> 
  <br />
  <span id="lnameStatus"></span>
  <br />
  <input type=button value=check> 
</form>
</body>
</html>
于 2013-02-05T07:53:48.710 回答
0

您应该将脚本代码放在 HTML 代码之后和正文标记内。这样它就不会在 html 代码之前运行。

于 2020-03-27T15:43:31.283 回答