JavaScript函数不验证表单

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

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

如果您想要做得更好，您可以创建一个'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 2

这是因为一旦你将第一个盒子变成红色，你就完成了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 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 = “服务器”]这么你必须使用如下

功能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; 

}