Validation for FileUpload and DropDownList one control must have value using jQuery in ASP.Net

Last Reply 10 months ago By AnandM

Posted 10 months ago

Hello Guys ..

 


I have a requirement like User Will Upload a image file using file upload control ,and in the same way he can select the images from the existing  drop down there is a checkbox when user selects checkbox existing images will be populated in drop down either he can select a checkbox or upload a image through file upload, now how do i keep the validation to upload a image based on two combinations..

 

Help..??

Posted 10 months ago

Hi Babloo22,

Refer below code and modify the code according to your need.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        var visible = false;
        function visibleImage() {
            var value = $('#chkImage').prop('checked');
            visible = value;
            if (value) {
                $('#imgDiv').css('display', 'block');
                $('#logohide').hide();
            }
            else {
                $('#imgDiv').css('display', 'none');
                $('#logohide').show();
            }
        }

        function btnSubClick() {

            if (isNullOrEmpty($('#<%=txtComName.ClientID%>').val())) {
                $('#lblComName').text('Community Name is required').show().fadeOut(3000);
                return false;
            }

            if (isNullOrEmpty($('#<%=txtPhone.ClientID%>').val())) {
                $('#lblPhone').text('Phone number is required').show().fadeOut(3000);
                return false;
            }

            if (isNullOrEmpty($('#<%=txtContactName.ClientID%>').val())) {
                $('#lblContactName').text('ContactName is required').show().fadeOut(3000);
                return false;
            }

            if (isNullOrEmpty($('#<%=txtAddress.ClientID%>').val())) {
                $('#lblAddress').text('Address is required').show().fadeOut(3000);
                return false;
            }

            if (visible) {
                if ($('[id*=ddlImages] option:selected').index() == 0) {
                    $('#ddlLogo').text('Please Select Logo').show().fadeOut(3000);
                    return false;
                }
            }
            else {
                if ($('[id*=logoUpload]').val() == '') {
                    $('#lblLogo').text('Please Select Logo').show().fadeOut(3000);
                    return false;
                }
            }

            return true;
        }

        function isNullOrEmpty(str) {
            if (str != null && str != '')
                return false;
            else
                return true;
        }
        $(function () {
            $('[id*=btnShow]').click(function () {
                $('[id*=AddCommunity]').modal('show');
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button Text="Show Modal" ID="btnShow" runat="server" />
        <div class="modal fade" id="AddCommunity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            Edit Community Info</h4>
                    </div>
                    <div class="modal-body txtCommunityName">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="txtCommunityName">
                                        Community Name</label>
                                </div>
                                <div class="col-md-9">
                                    <asp:TextBox ID="txtComName" runat="server" CssClass="form-control"></asp:TextBox>
                                    <label id="lblComName" style="display: none; color: red">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="txtPhone">
                                        Phone</label>
                                </div>
                                <div class="col-md-9">
                                    <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"></asp:TextBox>
                                    <label id="lblPhone" style="display: none; color: red">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="txtContactName">
                                        Contact Name</label>
                                </div>
                                <div class="col-md-9">
                                    <asp:TextBox ID="txtContactName" runat="server" CssClass="form-control"></asp:TextBox>
                                    <label id="lblContactName" style="display: none; color: red">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="txtAddress">
                                        Address</label>
                                </div>
                                <div class="col-md-9">
                                    <asp:TextBox ID="txtAddress" TextMode="MultiLine" Rows="3" runat="server" CssClass="form-control"></asp:TextBox>
                                    <label id="lblAddress" style="display: none; color: red">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="txtEmail">
                                        Email</label>
                                </div>
                                <div class="col-md-9">
                                    <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
                                    <label id="lblEmail" style="display: none; color: red">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="imgHide">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="chkImage">
                                        Use existing logo</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="checkbox" id="chkImage" onchange="visibleImage();" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row" id="imgDiv" style="display: none;">
                                    <div class="col-md-3">
                                        <label for="ddlImages">
                                            Select</label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="col-md-9">
                                            <asp:DropDownList runat="server" ID="ddlImages" CssClass="form-control">
                                                <asp:ListItem Text="Please Select" Value="0" />
                                                <asp:ListItem Text="Logo 1" Value="1" />
                                                <asp:ListItem Text="Logo 2" Value="2" />
                                                <asp:ListItem Text="Logo 3" Value="3" />
                                            </asp:DropDownList>
                                            <label id="ddlLogo" style="display: none; color: red">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row" id="logohide">
                                    <div class="col-md-3">
                                        <label for="Logo">
                                            Logo</label>
                                    </div>
                                    <div class="col-md-9">
                                        <asp:FileUpload ID="logoUpload" runat="server" />
                                        <label id="lblLogo" style="display: none; color: red">
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <asp:HiddenField ID="hdnImage" runat="server" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                Close</button>
                            <asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary btn-sm" Text="Save"
                                OnClick="btnSave_Click" OnClientClick="return btnSubClick();" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

C#

protected void btnSave_Click(object sender, EventArgs e)
{
   //Your saving code.
}

VB.Net

Protected Sub btnSave_Click(sender As Object, e As EventArgs)
'Your saving code.
End Sub

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html