Display Validation message on current Tab on Next Button Click using jQuery in ASP.Net MVC

chetan

SOLVED CLOSED ACTIVE ANSWERED
User: chetan
Posted: on Aug 04, 2019 05:03 AM
Forum: ASP.Net MVC
Answer: 1
Views: 10971
Sample Code: Download

I have 3 divs which is coming one by one after clicking on Next button. (Registration Process)

The fist div(id:rws-reg1) contains customer referene number and Postcode and next button.

Issue: After clicking on next button, second div(id:rws-reg2) comes but the validation "enter customer reference number" comes on next div Page.

I have the following code:

    <script>
        $(document).ready(function () {
            $("#rws-reg1").show();
            $("#rws-reg2").hide();
            $("#rws-reg3").hide();
            $('#btnNxtEmail').click(function () {
                $("#rws-reg2").show();
                $("#rws-reg1").hide();
                $("#rws-reg3").hide();
            })
        })
    </script>

    <div class="registration">
        <div class="limiter rws-main" id="dvMain">
            <div class="container-login100 rws-login" id="rws-reg1">
                <div class="wrap-login100 rws-login-wrap">
                    <form action="" class="login100-form validate-form-meter-read rws-meter-read validate-change-password validate-registration" method="post">
                        <span class="login100-form-title rws-form-title">
                            Account Details
                        </span>
                        <div class="wrap-input100">
                            <p class="rws-formp">Customer Reference:<span style="color: Red">*</span></p>
                            <input id="txtCustomerRef" class="input100" type="text" name="custRef" placeholder="Customer Reference" autocomplete="off">
                            <a href="#" data-toggle="popover" title="" data-placement="right" data-html="true" data-content="
                                <p>Your customer reference number is shown on your bill.</p>" data-original-title="">
                                <i class="fa fa-question-circle" style="font-size:20px;color:purple; margin-left:5px;"></i>
                            </a>
                        </div>
                        <div class="wrap-input100">
                            <p class="rws-formp">Postcode:<span style="color: Red">*</span></p>
                            <input id="txtPostcode" class="input100" type="text" name="postcode" placeholder="Postcode" autocomplete="off">
                        </div>
                        <div class="container-login100-form-btn rws-form-btn">
                            <button id="btnNxtEmail" class="login100-form-btn rws-sbmtbtn">
                                <a href="#reg2">Next</a>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="container-login100 rws-login" id="rws-reg2">
                ....
            </div>
            <div class="container-login100 rws-login" id="rws-reg3">
                ....
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnNxtEmail').click(function () {
                NxtEmail_data();
                return false;
            })
            function NxtEmail_data() {
                var CustReference = "", Postcode = ""
                CustReference = $("#txtCustomerRef").val();
                if (CustReference == '') {
                    var itemRow = "<ul id='listError'><li>" + "Please enter Customer reference number" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 400, 0, "", "");
                    return false;
                }

                Postcode = $("#txtPostcode").val();

                if (Postcode == '') {
                    var itemRow = "<ul id='listError'><li>" + "Please enter postcode" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 400, 0, "", "");
                    return false;
                }

                if (CheckPostcode(Postcode)) {

                    var mst_dataConfirmRef = {
                        CUSTOMER_REF: CustReference,
                        COAPOSTCODE: Postcode
                    }

                    var DataConfirmRef = JSON.stringify(mst_dataConfirmRef);
                    var url = '@Url.Action("CheckAccountRegistered", "Login")';
                    $("#myModal").show();
                    $.ajax({
                        url: url,
                        data: { CheckMstData: DataConfirmRef },
                        dataType: 'json',
                        type: 'POST',
                        success: function (data) {
                            $("#myModal").hide();
                            if (data.Success) {
                                tabStrip.enable(tabStrip.tabGroup.children().eq(0), false); tabStrip.enable(tabStrip.tabGroup.children().eq(1), true); tabStrip.enable(tabStrip.tabGroup.children().eq(2), false);
                                tabStrip.select(1);
                            }

                            else {
                                var itemRow = "<ul id='listError'><li>" + data.ErrorMessage + "</li></ul>";
                                FUNMessageBox(itemRow, "E", 0, 0, "", "");
                            }
                        }

                    });
                }
                else {
                    var itemRow = "<ul id='listError'><li>" + "Incorrect postcode" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 0, 0, "", "");
                }
            }

function FUNMessageBox(itemRow, type, w, h, url, control) {
    $("#divMessageContent").html(itemRow);
    var wdth = w > 0 ? w : 350;
    var hght = h > 0 ? h : 200;
    if (type == "E") // E = Error
    {
        document.getElementById('divError').style.display = '';
        document.getElementById('divSuccess').style.display = 'none';
        document.getElementById('divQuestion').style.display = 'none';
    }
    if (type == "Q") // E = Question
    {
        document.getElementById('divQuestion').style.display = '';
        document.getElementById('divError').style.display = 'none';
        document.getElementById('divQuestion').style.display = 'none';
    }
    if (type == "S") // S = Success
    {
        document.getElementById('divSuccess').style.display = '';
        document.getElementById('divError').style.display = 'none';
        document.getElementById('divQuestion').style.display = 'none';
    }
}

dharmend...

0 10

Reply
ANSWER
User: dharmendr
Replied: on Aug 06, 2019 03:23 AM
Report

Hi chetan,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#rws-reg1").show();
            $("#rws-reg2").hide();
            $("#rws-reg3").hide();
            $('#btnNxtEmail').click(function () {
                if (NxtEmail_data()) {
                    $("#rws-reg2").show();
                    $("#rws-reg1").hide();
                    $("#rws-reg3").hide();
                }
            });
            $('#btnNxtConfirm').click(function () {
                $("#rws-reg3").show();
                $("#rws-reg1").hide();
                $("#rws-reg2").hide();
            });

            function FUNMessageBox(itemRow, type, w, h, url, control) {
                //$("#divMessageContent").html(itemRow);
                var wdth = w > 0 ? w : 350;
                var hght = h > 0 ? h : 200;
                if (type == "E") // E = Error
                {
                    document.getElementById('divError').style.display = '';
                    document.getElementById('divError').innerHTML = itemRow;
                    document.getElementById('divSuccess').style.display = 'none';
                    document.getElementById('divQuestion').style.display = 'none';
                }
                if (type == "Q") // E = Question
                {
                    document.getElementById('divQuestion').style.display = '';
                    document.getElementById('divQuestion').innerHTML = itemRow;
                    document.getElementById('divError').style.display = 'none';
                    document.getElementById('divQuestion').style.display = 'none';
                }
                if (type == "S") // S = Success
                {
                    document.getElementById('divSuccess').style.display = '';
                    document.getElementById('divSuccess').innerHTML = itemRow;
                    document.getElementById('divError').style.display = 'none';
                    document.getElementById('divQuestion').style.display = 'none';
                }
            }

            function NxtEmail_data() {
                var isValid = true;
                var CustReference = "", Postcode = ""
                CustReference = $("#txtCustomerRef").val();
                Postcode = $("#txtPostcode").val();
                if (CustReference == '') {
                    var itemRow = "<ul id='listError'><li>" + "Please enter Customer reference number" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 400, 0, "", "");
                    isValid = false;
                    return isValid;
                }

                if (Postcode == '') {
                    var itemRow = "<ul id='listError'><li>" + "Please enter postcode" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 400, 0, "", "");
                    isValid = false;
                    return isValid;
                }

                if (isValid) {
                    FUNMessageBox('', 'E', 0, 0, '', '');
                }
                return isValid;
            }
        });
    </script>
</head>
<body>
    <div id="divMessageContent">
        <div id="divError" style="display: none;">
            Error
        </div>
        <div id="divSuccess" style="display: none;">
            Success
        </div>
        <div id="divQuestion" style="display: none;">
            Question
        </div>
    </div>
    <div class="registration">
        <div class="limiter rws-main" id="dvMain">
            <div class="container-login100 rws-login" id="rws-reg1">
                <div class="wrap-login100 rws-login-wrap">
                    <form action="" class="login100-form validate-form-meter-read rws-meter-read validate-change-password validate-registration"
                    method="post">
                    <span class="login100-form-title rws-form-title">Account Details </span>
                    <div class="wrap-input100">
                        <p class="rws-formp">
                            Customer Reference:<span style="color: Red">*</span></p>
                        <input id="txtCustomerRef" class="input100" type="text" name="custRef" placeholder="Customer Reference"
                            autocomplete="off" />
                        <a href="#" data-toggle="popover" title="" data-placement="right" data-html="true"
                            data-content="<p>Your customer reference number is shown on your bill.</p>" data-original-title="" />
                        <i class="fa fa-question-circle" style="font-size: 20px; color: purple; margin-left: 5px;">
                        </i></a>
                    </div>
                    <div class="wrap-input100">
                        <p class="rws-formp">
                            Postcode:<span style="color: Red">*</span></p>
                        <input id="txtPostcode" class="input100" type="text" name="postcode" placeholder="Postcode"
                            autocomplete="off" />
                    </div>
                    <div class="container-login100-form-btn rws-form-btn">
                        <button type="button" id="btnNxtEmail" class="login100-form-btn rws-sbmtbtn">
                            <a href="#reg2">Next</a>
                        </button>
                    </div>
                    </form>
                </div>
            </div>
            <div class="container-login100 rws-login" id="rws-reg2">
                <div class="wrap-login100 rws-login-wrap">
                    <form action="Login.html" class="login100-form validate-form-meter-read rws-meter-read validate-change-password validate-registration"
                    method="post">
                    <span class="login100-form-title rws-form-title">My Details </span>
                    <div class="wrap-input100">
                        <p class="rws-formp">
                            Email Address:<span style="color: Red">*</span></p>
                        <input id="txtEmail" class="input100" type="text" name="email" placeholder="Email Address"
                            autocomplete="off" />
                    </div>
                    <div class="wrap-input100">
                        <p class="rws-formp">
                            Password:<span style="color: Red">*</span></p>
                        <input id="txtPassword" class="input100" type="password:" name="password:" placeholder="Password:"
                            autocomplete="off" />
                    </div>
                    <div class="wrap-input100">
                        <p class="rws-formp">
                            Confirm Password:<span style="color: Red">*</span></p>
                        <input id="txtConfirmPswd" class="input100" type="password:" name="confirmpassword:"
                            placeholder="Confirm Password:" autocomplete="off" />
                    </div>
                    <div class="container-login100-form-btn rws-form-btn">
                        <button id="btnNxtConfirm" class="login100-form-btn rws-sbmtbtn">
                            <a href="#reg3">Next</a>
                        </button>
                    </div>
                    </form>
                </div>
            </div>
            <div class="container-login100 rws-login" id="rws-reg3">
                <div class="wrap-login100 rws-login-wrap">
                    <form action="Login.html" class="login100-form validate-form-meter-read rws-meter-read validate-change-password validate-registration"
                    method="post">
                    <span class="login100-form-title rws-form-title">Confirm </span>
                    <div class="wrap-input100 check">
                        <input id="Isconsentchecked" type="checkbox" value="true" name="Isconsentchecked" />
                        <input name="Isconsentchecked" type="hidden" value="false" />
                        <span>I consent to Symbio Energy staying in touch with me, including by email and SMS
                            text, to let me know about new services, deals and offers.</span>
                    </div>
                    <div class="wrap-input100">
                        <p>
                            <strong>Terms and Conditions</strong></p>
                        <p style="text-align: justify">
                            Last updated: (10/09/2018)
                            <br />
                            Please read these Terms and Conditions carefully before using the <span style="text-decoration: underline;
                                color: #3366ff;">http://symbioenergy.co.uk/</span> website operated by <strong>Symbio
                                    Energy Ltd</strong>.
                            <br />
                            Your access to and use of the Service is conditioned on your acceptance of and compliance
                            with these Terms. These Terms apply to all visitors, users and others who access
                            or use the Service.<br>
                            By accessing or using the Service you agree to be bound by these Terms. If you disagree
                            with any part of the terms then you may not access the Service.
                        </p>
                        <p>
                            <strong>Content</strong></p>
                        <p style="text-align: justify">
                            In these Website Standard Terms and Conditions, “Your Content” shall mean any audio,
                            video text, images or other material you choose to display on this Website. By displaying
                            Your Content, you grant <strong>Symbio Energy Ltd</strong>&nbsp;a non-exclusive,
                            worldwide irrevocable, sub licensable license to use, reproduce, adapt, publish,
                            translate and distribute it in any and all media.
                        </p>
                        <p style="text-align: justify">
                            Your Content must be your own and must not be invading any third-party's rights.
                            <strong>Symbio Energy Ltd</strong>&nbsp;reserves the right to remove any of Your
                            Content from this Website at any time without notice.
                        </p>
                        <p>
                            <strong>Changes</strong></p>
                        <p style="text-align: justify">
                            We reserve the right, at our sole discretion, to modify or replace these Terms at
                            any time. If a revision is material we will try to provide at least 30 days' notice
                            prior to any new terms taking effect. What constitutes a material change will be
                            determined at our sole discretion.
                        </p>
                        <p>
                            <strong>Contact Us</strong></p>
                        <p>
                            If you have any questions about these Terms, please contact us.
                        </p>
                    </div>
                    <div class="wrap-input100 check">
                        <input id="IsTermsConditionsChecked" type="checkbox" value="true" name="IsTermsConditionsChecked" />
                        <span>I agree to Symbio energy's terms of use</span>
                    </div>
                    <div class="container-login100-form-btn rws-form-btn">
                        <button type="button" id="btnConfirm" class="login100-form-btn rws-sbmtbtn">
                            <a href="Login.html">Confirm</a>
                        </button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Demo

Display Validation message on current Tab on Next Button Click using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us