Ramco Ramco

Ramco Ramco

  • 443
  • 3.4k
  • 521.5k

Error message below textbox

Jul 20 2022 10:59 AM

Hi

 I want error message to appear below textbox. Currently it is appearing on Right Side of textbox

<style type="text/css">
    .display-next
    {
     clear:both;
     display:block;
     float:left;
    }
        </style>

<div class="row">
                                <div class="col-12">
                                    <div class="input-group mb-4">
                                        <span class="input-group-text"><i class="fas fa-user-tie"></i></span>
                                        <asp:TextBox ID="txtVName" class="form-control alph" minlength="3" runat="server" placeholder="Enter your Name"></asp:TextBox>
                                        <h5 id="txtVNameMsg"  class="display-next" style="color: red;text-align:left;width:200px"></h5>
                                    </div>
                                </div>
                            </div>

<div class="row">
                                <div class="col-12">
                                    <div class="input-group mb-4">
                                        <span class="input-group-text"><i class="fas fa-user-tie"></i></span>
                                        <asp:TextBox ID="txtVName" class="form-control alph" minlength="3" runat="server" placeholder="Enter your Name"></asp:TextBox>
                                        <h5 id="txtVNameMsg"  class="display-next" style="color: red;text-align:left;width:200px"></h5>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                            </div>
                            <div class="col-12">
                                <div class="input-group mb-4">
                                    <span class="input-group-text"><i class="fas fa-at"></i></span>
                                    <asp:TextBox ID="txtVEmail" class="form-control" runat="server" AutoComplete="off" Type="Email" placeholder="Enter your Email"></asp:TextBox>
                                    <h5 id="txtVEmailMsg"  style="color: red;text-align:left;width:200px"></h5>
                                </div>
                            </div>

<asp:LinkButton ID="lnkBookDemo" runat="server" Style="color: white;" OnClientClick="return DoValidation3()" >Book Demo Slot</asp:LinkButton>

<script>
        function DoValidation3(parameter) {
            var valid = true;
            var txtVName = document.getElementById("txtVName").value;
            var txtVEmail = document.getElementById("txtVEmail").value;
 

            if ($.trim(txtVName) < 3) {
                $('#txtVNameMsg').show();
                $('#txtVNameMsg').text('Name is Required. Minimum 3 characters.');
                return false;
            }
            else if (txtVEmail.length < 6) {
                $('#txtVEmailMsg').show();
                $('#txtVEmailMsg').text('Email is Required. Minimum 6 characters.');
                return false;
            }
            return valid;
        };

Thanks


Answers (2)