Validation Message on HTML form will in line

Question

我想验证HTML表单的每个字段onblur。验证消息得到显示，但不跨越框的整个水平空间。 我希望它是这样的。

Customer Name: TextBox *Customer Name Must Not Be Blank 

但它显示：

Customer Name: TextBox *Customer 
         Name Must 
         Not Be 
         Blank 

这是我的代码：

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

Answer 1

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" onblur="return Validate()" onKeyUp="return Validate()"> 
 
    <table width="300"> 
 
     <tr> 
 
      <td class="labels" >Customer Name:</td> 
 
      <td><input type="text" name="name" ></td> 
 
      <td> <label class="message" id="message" ></td> 
 
     </tr>