Question

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

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

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

这是我的代码。

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

在提交时一次性内联显示所有验证消息

1 个答案: