Akhil Reddy Akhil Reddy - 9 months ago 19
HTML Question

Error message is not displayed

I am trying to display error message beside textbox but its not showing. Whats my mistake? I am unable to resolve this. I changed the width of the table but there is no change in the result.



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;
}

.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" 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>




Answer Source

If you want to show your error message next to the names textbox, then you should define a placeholder for it like as <span id="err_name"></span> and set its innerHTML in your js function:

    function chkname() {
      var myname = document.getElementById("names");
      var err = document.getElementById("err_name");
      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();
        err.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" 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>

Also if the valid() function is something else defined by you, its ok, but if you mean the same chkname() shall be called on submit button, you have to change <input type="submit" class="button" value="submit" onclick="valid();" /> to <input type="submit" class="button" value="submit" onclick="chkname();" />