?
Solved

Validating form using jquery using for

Posted on 2012-08-26
10
Medium Priority
?
289 Views
Last Modified: 2012-08-28
Hi Experts,

I am working on ASP.net 2.0 applcation using C#

How do we handle using jquery in my form. I wanted if textbox is not filled that corresponding label should display in red by using class 'mandatory'

<label for="TextBox1">First Name</label>
<input type="text" id="TextBox1" class="js-required" data-validate="isFilled"  />       

<label for="UcContactUs1_rdbPurposeGeneral">
    <span class="js-required" data-validate="isChecked">
      <input id="UcContactUs1_rdbPurposeGeneral" type="radio" name="UcContactUs1$purpose" value="rdbPurposeGeneral" checked="checked" />
      <label for="UcContactUs1_rdbPurposeGeneral">General Enquiries</label>
    </span>
</label>
 
<label for="UcContactUs1_rdbPurposeTravel">
    <span class="js-required" data-validate="isChecked">
      <input id="UcContactUs1_rdbPurposeTravel" type="radio" name="UcContactUs1$purpose" value="rdbPurposeTravel" />
      <label for="UcContactUs1_rdbPurposeTravel">Travel Services Enquiries</label>
    </span>
</label>


if textbox is not filled and button is clicked than label
<label for="TextBox1">First Name</label>

should done as
<label for="TextBox1" class="mandatory">First Name</label>

so with radio buttons

if data is filled in the control then on button click the mandatory class should get removed.

I have many fields in my form, so I need to run a loop and match for with id of control.

Loop should only consiered labels where control has class js-required" and validate the data as per attribute
data-validate="isFilled"

Please help me with jquery

Thanks
0
Comment
Question by:tia_kamakshi
  • 5
  • 5
10 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38336151
Have you considered using jquery.validate from bassistance? It's very good and very popular.
0
 

Author Comment

by:tia_kamakshi
ID: 38336675
Thanks for your reply

I am not good in jquery and ex[ecting solution for the same.

Please help me getting the solution

Regards,
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38337014
Here is a start. I don't really understand what you mean about the checkboxes. Please explain.

This will just add the mandatory class to the label if the text field is empty.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script>
            $(function(){
                $(".js-required").blur(
                    function(){
                        var that = $(this);
                        var input = $.trim(that.val());
                        if(input == ""){
                            that.prev("label").addClass("mandatory");
                        }else{
                            that.prev("label").removeClass("mandatory");
                        }
                    }
                );
            });
        </script>
        <style>
            .mandatory{
                color:red;
            }
        </style>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:tia_kamakshi
ID: 38337386
Many Thanks for the code

With radio button I meant, if radio button is not selected than all the labels with radio button should become as red by using mandatory class.

Your script works with onblur event of the textbox. I need it in on button click.

Please see my test html below.

Please help me in below code

Thanks again for your help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Validation Test</title>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script>
            $(function(){
                $(".js-required").blur(
                    function(){
                        var that = $(this);
                        var input = $.trim(that.val());
                        if(input == ""){
                            that.prev("label").addClass("mandatory");
                        }else{
                            that.prev("label").removeClass("mandatory");
                        }
                    }
                );
            });
    </script>

    <style>
            .mandatory{
                color:red;
            }
        </style>
</head>
<body>
    <label for="TextBox1">
        First Name</label>
    <input type="text" id="TextBox1" class="js-required" data-validate="isFilled" />
    <br />
    <br />
    <label class="title" for="purpose-general">
        What is the purpose of your enquiry?</label>
    <div>
        <label for="PurposeGeneral">
            <span class="js-required" data-validate="isChecked">
                <input id="PurposeGeneral" type="radio" name="groupPurpose" value="rdbPurposeGeneral" /><label
                    for="PurposeGeneral">General Enquiries</label></span>
        </label>
        <label for="PurposeTravel">
            <span class="js-required" data-validate="isChecked">
                <input id="PurposeTravel" type="radio" name="groupPurpose" value="rdbPurposeTravel" /><label
                    for="PurposeTravel">Travel Services Enquiries</label></span>
        </label>
    </div>
    <div>
        <label for="PurposeAir">
            <span class="js-required" data-validate="isChecked">
                <input id="PurposeAir" type="radio" name="groupPurpose" value="rdbPurposeAir" /><label
                    for="PurposeAir">Air Services Enquiries</label></span>
        </label>
        <label for="PurposePress">
            <span class="js-required" data-validate="isChecked">
                <input id="PurposePress" type="radio" name="groupPurpose" value="rdbPurposePress" /><label
                    for="PurposePress">Press Information</label></span></label>
    </div>
    <br />
    <input id="btnClickMe" onclick="" type="button" value="Click Me To Validate" />
</body>
</html>

Open in new window

0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38337486
<script>
            $(function(){
                $("#btnClickMe").click(
                    function(){
                        $(".js-required").each(
                            function(){
                                var that = $(this);
                                var input = $.trim(that.val());
                                if(input == ""){
                                    that.prev("label").addClass("mandatory");
                                }else{
                                    that.prev("label").removeClass("mandatory");

                                }
                            }
                            );
                      
                        if($("input[name='groupPurpose']").attr("checked") != "checked"){
                            $("input[name='groupPurpose']").next("label").addClass("mandatory");
                        }else{
                            $("input[name='groupPurpose']").next("label").removeClass("mandatory");
                        }


                        });
                
                
            });
    </script>

Open in new window

0
 

Author Closing Comment

by:tia_kamakshi
ID: 38337619
Many Many thanks for this.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38337625
no problem. However, the above script isn't completely right. sorry.

here is a revised script:

<script>
            $(function(){
                $("#btnClickMe").click(
                function(){
                    $(".js-required").each(
                    function(){
                        var that = $(this);
                        var input = $.trim(that.val());
                        if(input == ""){
                            that.prev("label").addClass("mandatory");
                        }else{
                            that.prev("label").removeClass("mandatory");

                        }
                    }
                );
                    
                if($("input[name='groupPurpose']:checked").length > 0){
                            $("input[name='groupPurpose']").parents(".radioButtons").find("label").removeClass("mandatory");
                        }else{
                            $("input[name='groupPurpose']").parents(".radioButtons").find("label").addClass("mandatory");
                        }
                });
            });
        </script>

Open in new window

0
 

Author Comment

by:tia_kamakshi
ID: 38337696
Your script at id: 38337486 is better than above one.

I was just trying to update the script at id: 38337486 to make label red by using class mandatory

I mean below line if radio button is not selected

<label  id="PurposeGeneral" class="title" for="purpose-general">
        What is the purpose of your enquiry?</label>

I am even hard to do this

See if you can help me fixing this

Regards,
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38337980
<script>
            $(function(){
                $("#btnClickMe").click(
                function(){
                    $(".js-required").each(
                    function(){
                        var that = $(this);
                        var input = $.trim(that.val());
                        if(input == ""){
                            that.prev("label").addClass("mandatory");
                        }else{
                            that.prev("label").removeClass("mandatory");

                        }
                    }
                );
                    
                if($("input[name='groupPurpose']:checked").length > 0){
                    
                            // all the labels:
                            $("input[name='groupPurpose']").parents(".radioButtons").find("label").removeClass("mandatory");
                            // just the title:
                            $("#PurposeGeneral").removeClass("mandatory");
                        }else{
                            // all the labels:
                            $("input[name='groupPurpose']").parents(".radioButtons").find("label").addClass("mandatory");
                            
                            // just the title:
                            $("#PurposeGeneral").addClass("mandatory");
                    }
                });
            });
        </script>

Open in new window

0
 

Author Comment

by:tia_kamakshi
ID: 38341231
Many Thanks.

This helped me understanding that how jquery works

Many Thanks again
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question