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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

HTML表单上的验证消息将以内联方式显示

1 个答案: