CODEWITHSUNDEEP
javascripthtmlcsserror-handling
user3402248
user3402248

Reputation: 469

Validation Message on HTML form to be shown inline

I want to validate each field of a HTML form onblur. The validation message gets displayed but it doesn't span the complete horizontal space of the box. I want it to be something like this.

Customer Name: TextBox *Customer Name Must Not Be Blank

But it displays:

 Customer Name: TextBox *Customer 
                         Name Must
                         Not Be
                         Blank

This is my Code:

<form  method="post" name="customer" action="newcustcheck.php" onblur="return Validate()" 
       onKeyUp="return Validate()">
    <table width="300">
        <tr>
            <td>Customer Name:</td>
            <td><input type="text" name="name" ></td>
            <td> <label class="message" id="message" ></td>
        </tr>
</table>
</form>

CSS

form {
width: 400px;
background:#FFD700;
color: #000000;
font: small Verdana, sans-serif;
position: absolute;
top: 200px;
left: 550px;}

.message{color:#FF0000;
font-size: small;
font-weight: bold;  }

JavaScript

function Validate(){
 if(x==null || x==""){
    document.getElementById('message').style.visibility="visible";
    document.getElementById('message').innerHTML="Customer Name must not be blank"; 
}
else{
    document.getElementById('message').style.visibility="hidden";
    }
}

Upvotes: 2

Views: 4857

Answers (1)

vinayakj
vinayakj

Reputation: 5681

function Validate() {
  var x = document.getElementsByName('name')[0].value;
  if (x == null || x == "") {
    document.getElementById('message').style.display = "block";
    document.getElementById('message').innerHTML = "Customer Name must not be blank";

  } else {
    document.getElementById('message').style.display = "none";
  }
}
form {
  width: 550px;
  background: #FFD700;
  color: #000000;
  font: small Verdana, sans-serif;
  position: absolute;
  top: 20px;
  left: 50px;
}

.message {
  color: #FF0000;
  font-size: small;
  font-weight: bold;
  white-space: pre;
}

.labels {
  white-space: pre;
}
<form method="post" name="customer" action="newcustcheck.php">
  <table width="300">
    <tr>
      <td class="labels">Customer Name:</td>
      <td><input type="text" name="name" onblur="return Validate()" onKeyUp="return Validate()"></td>
      <td> <label class="message" id="message"></td>
      </tr>
  </table>
 </form>

Upvotes: 1

Related Questions