Question

我有这个表格

<tr>
    <td><h5> Name</h5> <asp:TextBox ID="tb_name" ClientIDMode="Static"  CssClass="tb_orderByPhn" runat="server"  /> </td>
</tr>

<tr>
    <td><h5>Phone</h5> <asp:TextBox ID="tb_phone" ClientIDMode="Static" CssClass="tb_orderByPhn" runat="server" /> </td>
</tr>

<tr>
    <td><h5>Email</h5> <asp:TextBox ID="tb_email" ClientIDMode="Static" CssClass="tb_orderByPhn" runat="server" /> </td>
</tr>

<tr>
    <td> <asp:LinkButton id="btn_order1"  class="btn btn-lg btn-block btn-success btn_rad " OnClick="btn_order" OnClientClick=" return validate_order();"   runat="server" >Order now <i class=" glyphicon glyphicon-chevron-right  " ></i></asp:LinkButton></td>
</tr>

表单由javascript验证为

function validate_order() {

    if (document.getElementById("tb_phone").value == "") {
        document.getElementById("tb_phone").style.borderColor="red";
        return false;
    }

    if (document.getElementById("tb_email").value == "") {
        document.getElementById("tb_email").style.borderColor="red";
        return false;
    }

    if (document.getElementById("tb_name").value == "") {
        document.getElementById("tb_name").style.borderColor="red";
        return false;
    }
    return true;

}

但是当我点击保持字段为空的按钮时，我只在一个文本框上获得红色边框（javascript函数中的第一个文本框，即tb_phone），而不是全部三个。请问任何人都能解释一下吗？

Answer 1

这是因为一旦你将第一个方框设为红色，你就完成了return false;。这会终止该功能，绕过它下面的所有代码。

如果你想要全部三个，请使用变量，设置它，然后在最后返回它。

function validate_order() {
    var valid = true;

    if (document.getElementById("tb_phone").value == "") {
        document.getElementById("tb_phone").style.border = "1px solid red";
        valid = false;
    }

    if (document.getElementById("tb_email").value == "") {
        document.getElementById("tb_email").style.borderColor = "Red";
        valid = false;
    }

    if (document.getElementById("tb_name").value == "") {
        document.getElementById("tb_name").style.borderColor = "Red";
        valid = false;
    }

    return valid;
}

旁注：我注意到你在第一个栏目中这样做了：

document.getElementById("tb_phone").style.border = "1px solid red";

但在接下来的两个街区中，你要这样做：

document.getElementById("tb_email").style.borderColor = "Red";
document.getElementById("tb_name").style.borderColor = "Red";

我不知道应用于这些元素的CSS，但我希望这三个元素相互一致。（此外，CSS颜色名称几乎普遍以小写字母书写。）

Answer 2

我为你创建了一个代码段。如果您多次使用该元素，则将该元素保存在变量中会更快。如果在第二次提交后输入有效，此代码也将删除边框。

如果你想做得更好，你可以创建一个'validateInput'函数，并使用相同的函数验证每个输入。

function validateOrder() {
    var valid = true,
        name = document.getElementById("tb_name"),
        phone = document.getElementById("tb_phone"),
        email = document.getElementById("tb_email");
 
    validateInput.call(name);  
    validateInput.call(phone);
    validateInput.call(email);

  
    if (!validateInput.call(name) || !validateInput.call(phone) || !validateInput.call(email))
      valid = false;
  
    return valid;
}

function validateInput(){
  if(this.value == ""){
    this.style.border = "1px solid red";
    return false;  
  }
  else{
    this.style.border = "none";
    return true;  
  }
}

<tr><td><h5> Name</h5> <input id="tb_name" onkeyup="validateInput.call(this);" /></td></tr>
<tr><td><h5>Phone</h5> <input id="tb_phone" onkeyup="validateInput.call(this);" /></td></tr>
<tr><td><h5>Email</h5> <input id="tb_email" onkeyup="validateInput.call(this);" /></td></tr>

<tr><td><button onclick="validateOrder();" >Order now</button></td></tr>

Answer 3

function validate_order() {

if (document.getElementById("tb_phone").value == "") {
    document.getElementById("tb_phone").style.borderColor="red";
    return false;
}

if (document.getElementById("tb_email").value == "") {
    document.getElementById("tb_email").style.borderColor="red";
    return false;
}

if (document.getElementById("tb_name").value == "") {
    document.getElementById("tb_name").style.borderColor="red";
    return false;
}
return true;

}

试试这个，会有效吗

Answer 4

您的控件设置为[runat =“server”]，因此您必须按如下方式使用

function validate_order（）{

if (document.getElementById("<%=tb_phone.ClientID%>").value == "") {
    document.getElementById("%=tb_phone.ClientID%>").style.border = "1px solid red";
    return false;
}

if (document.getElementById("%=tb_email.ClientID%>").value == "") {
    document.getElementById("t%=b_email.ClientID%>").style.borderColor = "Red";
    return false;
}

if (document.getElementById("%=tb_name.ClientID%>").value == "") {
    document.getElementById("%=tb_name.ClientID%>").style.borderColor = "Red";
    return false;
}
return true;

}

Javascript函数无法验证表单

4 个答案: