提交时立即内联显示所有验证消息

Question

I would like JavaScript to display all the validation messages at once when the submit button is clicked.

Customer Name: TextBox: *Customer Name must not be blank Address : TextBox: *Address must not be blank City : TextBox: *City must not be blank

But it displays only one message at a time, every time the submit button is clicked.

This is my code.

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

        </tr><tr>
            <td><div class="message">*</div>Address:</td>
            <td><input type="text" name="address" ></td>
            <td> <label class="message" id="message1"></td>
        </tr>
                <tr>
            <td><div class="message">*</div>City:</td>
            <td><input type="text" name="city" ></td>
            <td> <label class="message" id="message2"></td>
        </tr>

JavaScript

 function Validate(){
var x=document.forms["customer"]["name"].value;
var y=document.forms["customer"]["address"].value;
var z=document.forms["customer"]["city"].value;

if(x==null || x==""){
    document.getElementById('message').style.visibility="visible";
    document.getElementById('message').innerHTML="Customer Name must not be blank";
    return false;

}
else{
    document.getElementById('message').style.visibility="hidden";

    }
//T8
if(y==null || y==""){
    document.getElementById('message1').style.visibility="visible";
    document.getElementById('message1').innerHTML="Address Field must not be blank";
    return false;
}
else{
    document.getElementById('message1').style.visibility="hidden";
    }

//T12
if(z==null || z==""){
    document.getElementById('message2').style.visibility="visible";
    document.getElementById('message2').innerHTML="City Field must not be blank";
    return false;
}
else{
    document.getElementById('message2').style.visibility="hidden";
    }

Answer 1

You are returning from the validate function as soon as you find first invalid input, you should keep looking instead and return only after every input field is validated.

 function Validate(){ var x=document.forms["customer"]["name"].value; var y=document.forms["customer"]["address"].value; var z=document.forms["customer"]["city"].value; var isValid = true; if(x==null || x==""){ document.getElementById('message').style.visibility="visible"; document.getElementById('message').innerHTML="Customer Name must not be blank"; isValid = false; } else{ document.getElementById('message').style.visibility="hidden"; } //T8 if(y==null || y==""){ document.getElementById('message1').style.visibility="visible"; document.getElementById('message1').innerHTML="Address Field must not be blank"; isValid = false; } else{ document.getElementById('message1').style.visibility="hidden"; } //T12 if(z==null || z==""){ document.getElementById('message2').style.visibility="visible"; document.getElementById('message2').innerHTML="City Field must not be blank"; isValid = false; } else{ document.getElementById('message2').style.visibility="hidden"; } return isValid; } 

 <form method="post" name="customer" action="newcustcheck.php" onsubmit="return Validate()" > <table width="200"> <tr> <td><div class="message">*</div>Customer Name:</td> <td><input type="text" name="name" ></td> <td> <label class="message" id="message" ></td> </tr><tr> <td><div class="message">*</div>Address:</td> <td><input type="text" name="address" ></td> <td> <label class="message" id="message1"></td> </tr> <tr> <td><div class="message">*</div>City:</td> <td><input type="text" name="city" ></td> <td> <label class="message" id="message2"></td> </tr> </table> <input type=submit /> </form>