Validate multiple TextBoxes on Button Click using JavaScript in ASP.Net

Last Reply 2 months ago By dharmendr

Posted 2 months ago

i am working on alpha.dubaiexporters.com. I have two inputs containing Keyword and categories.

i wrote the javascript client validation for the Keyword input so when user enter less than 3 character and clicked on search button,the clientside message will appear saying the character should be more than 3 character.

The issue is that when user select categories and clicked on search button,that javascript message is displaying.It should not be displayed.

how to achieve it?

i have used causesvalidation=false for button click.

<div class="header-search-form">
    <div class="header-form-container">
        <div class="header-input-container">
            <span class="header-input-title">Keyword:</span>
            <%--<input type="text" id="header-keyword" name="s"><div class="clearfix"></div>--%>
            <input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off">
            <%--    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate = "txtkeyword" ID="RegularExpressionValidator2" ValidationExpression = "^[\s\S]{3,}$" runat="server" ErrorMessage="Minimum 8 characters required."></asp:RegularExpressionValidator>--%>
            <div class="clearfix">
            </div>
        </div>
        <div class="header-input-container">
            <span class="header-input-title">Category:</span>
            <input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server"
                autocomplete="off" causesvalidation="false">
            <datalist id="browsers">
                <option value="Automotive"/>
                <option value="Building and Interiors"/>
                <option value="Food, Kitchen and Hotel Supplies"/>
                <option value="Industrial and Machinery"/>
                <option value="Consumer and Household"/>
                <option value="Medical and Healthcare"/>
                <option value="Printing , Packaging and Plastic"/>
                <option value="IT / Telecom / Electronics"/>
                <option value="Oil and Gas"/>
                <option value="Power and Energy"/>
            </datalist>
            <div class="clearfix">
            </div>
        </div>
        <%--    <input class="dt-header-search-submit dt-button dt-button-danger" type="button" value="Search" style="top:1px;width:225px;" runat="server" onserverclick="doit">--%>
        <asp:Button ID="Search" class="dt-header-search-submit dt-button dt-button-danger"
            Style="top: 0px; width: 226px; height: 70px;" Text="Search" runat="server" OnClick="doit"
            OnClientClick="return checkLength();" UseSubmitBehaviour="false" CausesValidation="false" />
    </div>
</div>

javascript:

<script type="text/javascript">
    function checkLength() {
        var textbox = document.getElementById('<%=txtkeyword.ClientID%>');
        if (textbox.value.length < 3) {
            alert("The entered input should be 3 or more than 3 characters");
            return false;
        }
    }
</script>
Posted 2 months ago

Hi chetan,

Refer the below code.

HTML

<div class="header-search-form">
    <div class="header-form-container">
        <div class="header-input-container">
            <span class="header-input-title">Keyword:</span>
            <input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off">
            <div class="clearfix">
            </div>
        </div>
        <div class="header-input-container">
            <span class="header-input-title">Category:</span>
            <input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server"
                autocomplete="off" />
            <datalist id="browsers">
                <option value="Automotive"/>
                <option value="Building and Interiors"/>
                <option value="Food, Kitchen and Hotel Supplies"/>
                <option value="Industrial and Machinery"/>
                <option value="Consumer and Household"/>
                <option value="Medical and Healthcare"/>
                <option value="Printing , Packaging and Plastic"/>
                <option value="IT / Telecom / Electronics"/>
                <option value="Oil and Gas"/>
                <option value="Power and Energy"/>
            </datalist>
            <div class="clearfix">
            </div>
        </div>
        <asp:Button ID="Search" Text="Search" runat="server" OnClick="doit" OnClientClick="return checkLength();" />
    </div>
</div>
<script type="text/javascript">
    function checkLength() {
        var txtKeyWord = document.getElementById('<%=txtkeyword.ClientID%>');
        var txtCategory = document.getElementById('<%=txtserach.ClientID%>');
        if (txtKeyWord.value.length < 3 && txtCategory.value.length == 0) {
            alert("The entered input should be 3 or more than 3 characters");
            return false;
        }
    }
</script>

Screenshot