如何使用javascript在html旁边的字段旁边显示错误消息请帮帮我

时间:2014-08-21 05:18:13

标签: javascript html

我使用javascript编写了一个程序,用于在字段旁边显示错误消息而不是警告但是它无法正常工作请帮助我使用该程序

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      <script type="text/javascript">
         function check()
         {
              if(document.getElementById('firstname').value==NULL || myform.firstname.value.length==0)
              {
                  document.getElementById('errorname').value="this is an invalid name";
              }
         }
      </script>
   </head>
   <body>
      <form name="myform">
         <p>name</p>
         <input type="text" name="firstname" onblur="check()"/>
         <span id="errorname"></span>
         <br/><input type="button" value="submit" />
      </form>
   </body>
</html>

7 个答案:

答案 0 :(得分:4)

你没有给你的id文本框也将textbox的值传递给函数

像这样

<input type="text" name="firstname" id="firstname" onblur="check(this.value)"/>

JS功能

function check(value)
{
     if(value.trim()=="")
     {
        document.getElementById('errorname').innerHTML="this is an invalid name";  
     }    
}

<强> SEE FIDDLE DEMO

答案 1 :(得分:1)

HTML:

<form id="form">
    <p>name</p>
    <input type="text" id="firstname" name="firstname" /> <span id="errorname"></span>

    <br/>
    <input type="submit" value="Submit" />
</form>

JavaScript的:

var form = document.getElementById('form'),
    firstName = document.getElementById('firstname'),
    errorMessage = document.getElementById('errorname');

function check(event) {
    event.preventDefault();
    if (firstName.value === '' || !firstName.value.length) {
        console.log('here')
        errorMessage.innerText = 'This is an invalid name';
    } else {
        errorMessage.innerText = '';
    }
}

form.addEventListener('submit', check);

JSFiddle示例:

<强> http://jsfiddle.net/2etd93jL/2/

答案 2 :(得分:1)

您的输入字段未提供ID。添加ID并访问您的输入字段。

function check(){
  if(document.getElementById('firstname').value==""){
    document.getElementById('errorname').innerHTML ="this is an invalid name";
  }
}

并改变你的html字段。

<input type="text" name="firstname" id="firstname" onblur="check()"/>

答案 3 :(得分:0)

您使用了document.getElementById('firstname'),但您的输入input type="text" name="firstname"没有ID,只有一个名称。尝试将id="firstname"添加到输入框。

答案 4 :(得分:0)

以下代码列表中的多个错误:

  1. 使用NULL:它为null而不是NULL。
  2. 没有将id指定为firstname并在if循环中检查
  3. 为跨度需要使用innerHTML提供价值
  4. 所以你的HTML代码:

    <form name="myform">  
    <p>name</p><input id="firstname" type="text" name="firstname" onblur="check()"/><span id="errorname">    </span>
    <br/><input type="button" value="submit" />
    </form>
    

    JS代码:

    function check()
    {
    if(document.getElementById('firstname').value==null || myform.firstname.value.length==0)
    {
    document.getElementById('errorname').innerHTML="this is an invalid name";
    }
    }
    

    Working Fiddle

答案 5 :(得分:0)

这几乎是你的代码,很少有变化来满足要求。 查看fiddle

function check(){
     if(document.getElementById('firstname').value=='' || !document.getElementById('firstname').value.length){
          document.getElementById('errorname').innerHTML="this is an invalid name";
      }
}

答案 6 :(得分:0)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <script type="text/javascript">
        function check() {
            if (document.myform.firstname.value === null || myform.firstname.value.length == 0) {
                document.getElementById('errorname').innerHTML = "this is an invalid name";
            }
        }
    </script>
</head>
<body>
    <form name="myform">
        <p>name</p>
        <input type="text" name="firstname" onblur="check()" /><span id="errorname">    </span>
        <br />
        <input type="button" value="submit" />
    </form>
</body>
</html>