使用javascript验证Ajax组合框

Validate Ajax Combobox using javascript

本文关键字：组合 Ajax 验证 javascript 使用      更新时间：2023-09-26

我在代码中使用ajax组合框代替dropdownlist，现在我想在客户端。我选择使用javascript并使用以下代码进行验证：

function validateCombobox(){
    var comboboxId = document.getElementById('<%=ComboBox1.ClientID%>');
    if(comboboxId.value=="some value") {
        alert("Error");
    }
}

但我无法验证combobox。

我的html代码是：

<asp:ComboBox ID="ComboBox1" runat="server"
    AutoCompleteMode="Suggest" 
    CaseSensitive="false" 
    DropDownStyle="DropDownList">
</asp:ComboBox>

ASP在浏览器上生成的代码：

<div onchange="javascript:setTimeout('__doPostBack(''ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit'','''')', 0)"
    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit" style="display:inline;">
    <table id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_Table"
      class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" border="0"
      style=
      "border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer">
                <input type="text" autocomplete="off" style="width:150px;"
                    name="ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit$unit_TextBox"                    
                    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_TextBox" />
            </td>
            <td class="ajax__combobox_buttoncontainer">
                <button type="button" 
                    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_Button">
                </button>
            </td>
        </tr>
    </table>
    <ul id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_OptionList"
      class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li>GM</li>
        <li>KG</li>
    </ul>
    <input type="hidden"  value="0" 
        name="ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit$unit_HiddenField"'
        id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_HiddenField"/>
</div>

借助@Sethu和@Scott给出的答案获得解决方案：

我使用以下代码：

function validateCombobox(){
    var comboBox = document.getElementById('<%=ComboBox1.ClientID%>_ComboBox1_TextBox');
    if(comboBox.value=="some value")
    {
        alert("Error");
    }
}

组合框在客户端创建多个html。

最初，该值存储在一个隐藏字段中。

function validateCombobox()
{
var comboCotainer= document.getElementById('<%=ComboBox1.ClientID%>');
var hdnField = FindChild(comboCotainer);
if(hdnField != null && hdnField.value == "-1")
{
 alert("Error");
}
}
function FindChild(container) {
        var hiddenControl = null;
        if (container.children && container.children.length > 0) {
            for (var i = 0; i < container.children.length; i++) {
                if (container.children[i].type == "hidden") {
                    hiddenControl = container.children[i];
                    break;
                 }
            }
        }
        return hiddenControl;
    }

jquery的位将消除FindChild函数

如果您使用Jquery，请使用以下代码

function validateCombobox() {
        var selectedVal = $('#<%=ComboBox1.ClientID%> input[type=hidden]').val();
        if (selectedVal == "-1") {
            alert("Error");
        }
    }

隐藏控件保存所选项目的索引，因此检查-1或非负值

试试这个。

function validateCombobox(){
    var comboboxObject = document.getElementById('<%=ComboBox1.ClientID%>');
    var inputs = comboboxObject.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'text' && inputs[i].value == "some value") {
            alert("Error");
            break; //why loop further?
        }
    }
}
相关文章：