How to check all previous TextBox is empty or not using jQuery in ASP.Net

Last Reply on Jul 20, 2017 10:11 AM By dharmendr

Posted on Jul 19, 2017 04:15 AM

in my form, i need a jquery

if I click on 3rd or 4th text this will check previous fields are empty or not if any show error

 

<div class="col-md-6">
        <div id="logbox">
           <h1>create an account</h1>
            @using (Html.BeginForm("Signup", "Home", FormMethod.Post))
            {
                @Html.ValidationSummary(true)
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @id="Name", @class = "input pass", @placeholder = "What's your name?", @pattern = "^[\\w]{3,16}$", @autofocus = "autofocus"@*, @required = "required"*@ } })
                <div id="errorName" style="display:none" class="text-danger errorPadding">Name Field Is Empty</div>
                  @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @id="Email" , @type = "email", @placeholder = "What's your Email?", @*@required = "required",*@ @class = "input pass" } })
                <div id="errorEmailValid" style="display:none" class="text-danger errorPadding">This email is not valid</div>
                 <div id="errorEmail" style="display:none" class="text-danger errorPadding">Email Field Is Empty</div>
                 @Html.EditorFor(model => model.Password, new { htmlAttributes = new {@id="Password" , @type = "password", @placeholder = "Choose a password", @*@required = "required",*@ @class = "input pass" } })
                <div id="errorPass" style="display:none" class="text-danger errorPadding">Password Field Is Empty</div>
                  @Html.EditorFor(model => model.RepeatPass, new { htmlAttributes = new {@id="RePassword" , @type = "password", @placeholder = "Repeate password", @*@required = "required",*@ @class = "input pass" } })
                <div id="errorRePass" style="display:none" class="text-danger errorPadding">Repeate Password Field Is Empty</div>
                <div id="errorRePassNotMatch" style="display:none" class="text-danger errorPadding">Repeate Password does not match your password</div>
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new {@id="Address" , @placeholder = "What's your address?", @*@required = "required",*@ @class = "input pass" } })
                <div id="errorAddress" style="display:none" class="text-danger errorPadding">Address Field Is Empty</div>
                <input type="submit" id="btnSignup" value="Sign me up!" class="inputButton"/>
            }


        </div>
    </div>

 

You are viewing reply posted by: dharmendr on Jul 20, 2017 10:11 AM.
Posted on Jul 20, 2017 10:11 AM Modified on on Jul 21, 2017 02:19 AM

Hi amitsinghr,

refer the below sample. You need to implement the same in your mvc code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var list = $("input[type=text]").toArray();
            $('input[type=text]').on("blur", function () {
                var current = $(this).get(0);
                var index;
                for (var j = 0; j < list.length; j++) {
                    if (list[j] == $(this)[0]) { index = j; }
                }
                for (var i = 0; i < index; i++) {
                    var previous = list[list.indexOf(current) - (i + 1)];
                    if ($(previous).val() == "") {
                        $(previous).focus();
                        alert($(previous)[0].id + " required");
                    }
                    return false;
                }
                if ($(this).val() == "") {
                    alert($(this)[0].id + " required");
                }
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        First Name:<input name="txtFirstName" type="text" id="txtFirstName" />
    </div>
    <div>
        Last Name:<input name="txtLastName" type="text" id="txtLastName" />
    </div>
    <div>
        Age:<input name="txtAge" type="text" id="txtAge" />
    </div>
    </form>
</body>
</html>

Demo