samedi 27 juin 2015

Validation Message on HTML form

I want to validate each field of a HTML form onblur. The validation message gets displayed but it doesn't use 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>

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

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

Aucun commentaire:

Enregistrer un commentaire