You must Sign In to post a response.
  • Category: JQuery

    Validate the textbox using JQuery

    i have one text box.

    Name textbox

    Validate the above textbox using Jquery.


    for that download the jquery 1.4.1 and put in that project script.

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
    </head>


    <body>
    <form id="form1" runat="server">
    <div>


    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"> <pre



    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

    <script type ="text/javascript" >

    $(document).ready(function () {
    $("#form1").validate({

    rules: {
    <%=txtName.UniqueID %>:{
    required:true
    },

    }


    },

    messages: {

    <%=txtName.UniqueID %>:{
    required: "Name should not be empty"
    },



    }

    });
    });
    </script>





    <style type ="text/css" >
    label.error {
    color: red;
    display:inline;
    }
    .error
    {
    height: 26px;
    }
    </style>

    <br />

    Name <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <br />
    <br />

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="error"
    onclick="btnSubmit_Click" />


    </div>
    </form>
    </body>
    </html>



    i have one text box validate that textbox using jquery.

    When i run as follows

    Name textbox

    Without typing in text box and click submit message not shown.

    what is the mistake in my above code.
  • #766441
    Hi,

    If you want to validate the textbox text before submit the records, then on click of submit button you need to validate, if record status is empty then prevent them by using PreventDefault() method of Jquery,

    In my below scenario I want to validate the textboxes of mandatory fields, for that I make a separate class name it as "mandatory", now I'm going to check the null case for all those mandatory textboxes.


    $(document).ready(function() {
    $('#btnSubmit').click(function(e) {
    var isValid = true;
    $('input[type="text"].mandatory').each(function() {
    if ($.trim($(this).val()) == '') {
    isValid = false;
    $(this).css({
    "border": "1px solid red",
    "background": "#FFCECE"
    });
    }
    else {
    $(this).css({
    "border": "",
    "background": ""
    });
    }
    });
    if (isValid == false)
    e.preventDefault();
    else
    alert('Records submitted successfully..!');
    });
    });




    In above code this line is very very important,

    $('input[type="text"].mandatory').each(function() {

    in above line .mandatory is the classname which i used to make the controls as mandatory.
    Refer below link for more details, http://www.jquerybyexample.net/2012/12/jquery-to-check-all-textboxes-empty.html

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #766444
    check .length property of the control to check if the control value is empty or not
    see below snippet

    $("#Name").focus()

    $("#Name, #Address").blur(function(){
    if($(this).val().length == 0){
    $(this).after('<div class="red">This field is required</div>');
    } else {
    $(this).next('.red').remove()
    }
    });
    OR



    Try this code (I just changed the structure and added return false) :
    $("#Name").focus()

    $("#Name, #Address").blur(function(){
    if($(this).val().length == 0){
    $(this).after('<div class="red">This field is required</div>');
    } else {
    $(this).next('.red').remove()
    }
    });

    But I think the best way is to add the required attribute to your fields like this :
    < input type="text" name="name" required />
    < input type="text" name="address" required />

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]


Sign In to post your comments