不显示错误消息

时间：2017-03-12 10:48:40

标签： html

我正在尝试在文本框旁边显示错误消息，但它没有显示。我的错是什么？我无法解决这个问题。我改变了表的宽度，但结果没有变化。

＆＃13;
＆＃13; 
    function chkname() {
      var myname = document.getElementById("names");
      if (myname.length == 0) {
        myname.innerHTML = "this is invalid name";
      }
      var pos = myname.value.search(/^[A-Z][a-z]+$/);
      if (pos != 0) {

        myname.focus();
        myname.select();
        myname.innerHTML = "this is invalid name";
        return false;
      }
      else
        return true;
    }
＆＃13; 
    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }

    body {
      color: red;
      background-image: url(https://ae01.alicdn.com/kf/HTB18yb5JVXXXXbjXXXXq6xXFXXXh/Photo-Backdrops-Children-Vinyl-Photo-Props-for-Studio-Photography-font-b-Background-b-font-font-b.jpg);
      background-repeat: no-repeat;
      background-size: 1250px 500px;
    }
＆＃13; 
  <div align="left">
    <form id="myform" action="Catologue.html">
      <table id="tables" align="center">
        <tr>
          <td>Name:</td>
          <td><input type="text" id="names" name="names" onchange="chkname()" /></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input type="password" id="pass" name="pass" /></td>
        </tr>
        <tr>
          <td>EMAIL-ID:</td>
          <td><input type="text" id="mail" name="mail" /></td>
        </tr>
        <tr>
          <td>PHONE NUMBER:</td>
          <td><input type="text" id="num" name="num" /></td>
        </tr>


        <tr>
          <td>SEX:</td>
          <td id="group">
            <input type="radio" name="radio" id="radio" value="male">M
            <input type="radio" name="radio" id="radio" value="female">F
          </td>
        </tr>
        <tr>
          <td>DOB:</td>
          <td>
            <select id="day" name="name">
              <option>DAY</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
            <select id="month" name="month">
              <option>MONTH</option>
              <option>JAN</option>
              <option>FEB</option>
              <option>MAR</option>
              <option>APR</option>
            </select>
            <select id="year" name="year">
              <option>YEAR</option>
              <option>1991</option>
              <option>1990</option>
              <option>1989</option>
              <option>1988</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>LANGUAGES KNOWN:</td>

          <td style="display:inline" id="check">
            <input type="checkbox" />english
            <input type="checkbox" id="checks" name="checks" />telugu
            <input type="checkbox" id="checks" name="checks" />hindi
            <input type="checkbox" id="checks" name="checks" />tamil
          </td>
        </tr>
        <tr><td>Address:</td><td><textarea rows=5 id="rows" name="rows"></textarea></td>
        <tr>

        <tr>
          <td>
            <input type="submit" class="button" value="submit" onclick="valid();" />
            <input type="reset" class="button" value="reset" />
          </td>
        </tr>
      </table>
    </form>
  </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

单击提交按钮时，您错误地调用了函数valid();。我已将其更改为chkname()：

此外，if (myname.length == 0) {应该是if (myname.value.length == 0) { 

function chkname() {

  var myname = document.getElementById("names");
  if (myname.value.length == 0) {
    myname.value = "this is invalid name";
  }

  var pos = myname.value.search(/^[A-Z][a-z]+$/);
  if (pos != 0) {

    myname.focus();
    myname.select();
    myname.innerHTML = "this is invalid name";
    return false;
  } else
    return true;
}
.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

body {
  color: red;
  background-image: url(https://ae01.alicdn.com/kf/HTB18yb5JVXXXXbjXXXXq6xXFXXXh/Photo-Backdrops-Children-Vinyl-Photo-Props-for-Studio-Photography-font-b-Background-b-font-font-b.jpg);
  background-repeat: no-repeat;
  background-size: 1250px 500px;
}
<div align="left">
  <form id="myform">
    <table id="tables" align="center">
      <tr>
        <td>Name:</td>
        <td><input type="text" id="names" name="names" onchange="chkname()" /></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="pass " name="pass" /></td>
      </tr>
      <tr>
        <td>EMAIL-ID:</td>
        <td><input type="text" id="mail" name="mail" /></td>
      </tr>
      <tr>
        <td>PHONE NUMBER:</td>
        <td><input type="text" id="num" name="num" /></td>
      </tr>


      <tr>
        <td>SEX:</td>
        <td id="group">
          <input type="radio" name="radio" id="radio" value="male">M
          <input type="radio" name="radio" id="radio" value="female">F
        </td>
      </tr>
      <tr>
        <td>DOB:</td>
        <td>
          <select id="day" name="name">
                  <option>DAY</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                </select>
          <select id="month" name="month">
                  <option>MONTH</option>
                  <option>JAN</option>
                  <option>FEB</option>
                  <option>MAR</option>
                  <option>APR</option>
                </select>
          <select id="year" name="year">
                  <option>YEAR</option>
                  <option>1991</option>
                  <option>1990</option>
                  <option>1989</option>
                  <option>1988</option>
                </select>
        </td>
      </tr>
      <tr>
        <td>LANGUAGES KNOWN:</td>

        <td style="display: inline;" id="check">
          <input type="checkbox" />english
          <input type="checkbox" id="checks" name="checks" />telugu
          <input type="checkbox" id="checks" name="checks" />hindi
          <input type="checkbox" id="checks" name="checks" />tamil
        </td>
      </tr>
      <tr>
        <td>Address:</td>
        <td><textarea rows="5" id="rows" name="rows"></textarea></td>
        <tr>

          <tr>
            <td>
              <input type="submit" class="button" value="submit" onclick="chkname();" />
              <input type="reset" class="button" value="reset" />
            </td>
          </tr>
    </table>
  </form>
</div>

答案 1 :(得分：0)

如果要在名称文本框旁边显示错误消息，则应为其定义占位符，如<span id="err_name"></span>，并在js函数中设置其innerHTML：

＆＃13;
＆＃13; 
    function chkname() {
      var myname = document.getElementById("names");
      var err = document.getElementById("err_name");
      if (myname.value.length == 0) {
        myname.innerHTML = "this is invalid name";
      }
      var pos = myname.value.search(/^[A-Z][a-z]+$/);
      if (pos != 0) {
        myname.focus();
        myname.select();
        err.innerHTML = "this is invalid name";
        return false;
      }
      else
        return true;
    }
＆＃13; 
    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }

    body {
      color: red;
      background-image: url(https://ae01.alicdn.com/kf/HTB18yb5JVXXXXbjXXXXq6xXFXXXh/Photo-Backdrops-Children-Vinyl-Photo-Props-for-Studio-Photography-font-b-Background-b-font-font-b.jpg);
      background-repeat: no-repeat;
      background-size: 1250px 500px;
    }
＆＃13; 
  <div align="left">
    <form id="myform" action="Catologue.html">
      <table id="tables" align="center">
        <tr>
          <td>Name:</td>
          <td><input type="text" id="names" name="names" onchange="chkname()" /><span id="err_name"></span></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input type="password" id="pass" name="pass" /></td>
        </tr>
        <tr>
          <td>EMAIL-ID:</td>
          <td><input type="text" id="mail" name="mail" /></td>
        </tr>
        <tr>
          <td>PHONE NUMBER:</td>
          <td><input type="text" id="num" name="num" /></td>
        </tr>


        <tr>
          <td>SEX:</td>
          <td id="group">
            <input type="radio" name="radio" id="radio" value="male">M
            <input type="radio" name="radio" id="radio" value="female">F
          </td>
        </tr>
        <tr>
          <td>DOB:</td>
          <td>
            <select id="day" name="name">
              <option>DAY</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
            <select id="month" name="month">
              <option>MONTH</option>
              <option>JAN</option>
              <option>FEB</option>
              <option>MAR</option>
              <option>APR</option>
            </select>
            <select id="year" name="year">
              <option>YEAR</option>
              <option>1991</option>
              <option>1990</option>
              <option>1989</option>
              <option>1988</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>LANGUAGES KNOWN:</td>

          <td style="display:inline" id="check">
            <input type="checkbox" />english
            <input type="checkbox" id="checks" name="checks" />telugu
            <input type="checkbox" id="checks" name="checks" />hindi
            <input type="checkbox" id="checks" name="checks" />tamil
          </td>
        </tr>
        <tr><td>Address:</td><td><textarea rows=5 id="rows" name="rows"></textarea></td>
        <tr>

        <tr>
          <td>
            <input type="submit" class="button" value="submit" onclick="valid();" />
            <input type="reset" class="button" value="reset" />
          </td>
        </tr>
      </table>
    </form>
  </div>
＆＃13;
＆＃13;
＆＃13;

此外，如果valid()函数是您定义的其他函数，则可以，但如果您的意思是在提交按钮上调用相同的chkname()，则必须将<input type="submit" class="button" value="submit" onclick="valid();" />更改为<input type="submit" class="button" value="submit" onclick="chkname();" />

相关问题
最新问题