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

Question

我希望 JavaScript 在单击提交按钮时立即显示所有验证消息。

客户名称:文本框:*客户名称不能为空
地址 : 文本框: *地址不能为空
城市:文本框:*城市不能为空

但每次单击提交按钮时，它一次仅显示一条消息。

这是我的代码。

<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

您将从 validate 返回一旦找到第一个 invalid 即可运行输入，您应该继续查找，并仅在验证每个输入字段后才返回。

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>