How to change TextBox class based on input


Tags: jquery,html,css

Problem :

I have a TextBox and a Button and I am validating them using JQuery. I am using CSS styles to customize the textbox.

My CSS is:

<style>
        #TextBox1 {
            outline:none;
            transition: all 0.25s ease-in-out;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
            border:1px solid rgba(0,0,0, 0.2);
            text-transform:capitalize;
        }
        #TextBox1:focus {
            box-shadow: 0 0 3px rgba(156, 190, 247, 1);
            -webkit-box-shadow: 0 0 3px rgba(156, 190, 247, 1); 
            -moz-box-shadow: 0 0 3px rgba(156, 190, 247, 1);
            border:1px solid rgba(99, 134, 189, 0.8);
        }
        .TextBox1Error {
            box-shadow: 0 0 6px rgba(245, 141, 148, 1);
            -webkit-box-shadow: 0 0 6px rgba(245, 141, 148, 1); 
            -moz-box-shadow: 0 0 6px rgba(245, 141, 148, 1);
            border:1px solid rgba(99, 134, 189, 0.8);
        }
</style>

My JQuery is:

<input style="background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" />
            <input id="Button1" type="button" value="Search" class="locButton" />
            <script type = "text/javascript">
                var $j = jQuery.noConflict();
                $j(document).ready(function () {
                    $j('#TextBox1').watermark('Search...        ', { className: 'wmark' });
                    //console.dir($j("#Button1"));
                    $j("#Button1").click(function () {
                        var textbox = document.getElementById("TextBox1").value;
                        if (textbox.length > 0) {
                            //alert("Search query is not empty and redirecting...");
                            window.location.href = "http://www.mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
                        }
                        else {
                            alert("Search query is empty");
                            document.getElementById("TextBox1").focus();
                        }
                    });
                    $j('#TextBox1').keyup(function () {
                        var $th = $j(this);
                        $th.val($th.val().replace(/[^a-zA-Z0-9 ]/g, ''));
                    });
                    $j('#TextBox1').keypress(function (e) {
                        var textbox = document.getElementById("TextBox1").value;
                        var code = (e.keyCode ? e.keyCode : e.which);
                        if (code == 13) {
                            if (textbox.length > 0) {
                                e.preventDefault();
                                window.location.href = "http://www.mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
                            }
                            else {
                                e.preventDefault();
                                alert("Search query is empty");
                                document.getElementById("TextBox1").focus();
                            }
                        }
                    });
                });
    </script>

How can I modify the above JQuery code to change the class of the TextBox to TextBox1Error if the value inside is empty for either hitting enter in the textbox or pressing the Search button?

I tried adding $j('TextBox1').addClass('TextBox1Error'); inside where thealert` is being displayed but then the rest of the code doesn't work.



Solution :

var $j = jQuery.noConflict();
$j(document).ready(function () {
    $j("#Button1").click(function () {
        var textbox = document.getElementById("TextBox1").value;
        if (textbox.trim().length == 0)
            $j("#TextBox1").addClass('TextBox1Error');
    });
});

Example:

http://jsfiddle.net/trevordowdle/fv8d5/

As for hitting enter in the search box, the code would be similar but just go in your keyPress function.

Update

var $j = jQuery.noConflict();
                $j(document).ready(function () {
                    $j("#Button1").click(function () {
                        var textbox = document.getElementById("TextBox1").value;
                        if (textbox.trim().length == 0){
                            $j("#TextBox1").addClass('TextBox1Error');
                            $j("#TextBox1").focus();   
                        }
                        else
                            $j("#TextBox1").removeClass('TextBox1Error');
                    });
                    $j("#TextBox1").focus(function () {
                        if(!$j(this).hasClass('.TextBox1Error'))
                            $j(this).addClass('focus');    
                    });
                    $j("#TextBox1").blur(function () {
                        $j(this).removeClass('focus');    
                    });
                });

http://jsfiddle.net/trevordowdle/fv8d5/2/


    CSS Howto..

    How to create a darker background on a whole page with one new div

    Picture thumbnail shown in Google image search output is
    not , why? [closed]
    It basically comes down to preference. It is considered outdated to use table for data layouts. Use table for just that - actual tables. For the layout and such tasks,...
    Read more

    How can I caption an image inside a paragraph

    ?

    How the licensed web font is getting rendered?

    how to solve css check box checking issue

    How to hide element label by element id in CSS?

    How can I create a footer/toolbar in an iPhone web app?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    How do I make sure my text stays on same line when I add a 'space' inside
  • element?
  • How to align image next to text and then stack them (responsive)

    How to find if a request is for js or css in httpHandler

    how to colour user selected option using CSS in Firefox

    How to create donut chart in pure css & svg

    How to limit jquery selectable to 1 tr and pass selected items to another page

    Codeigniter: how to access css files from different views?

    How to do caption hover effect on a background?

    How would I make this into an dynamic :nth-child css selector [duplicate]

    How to fix too long css dropdown in Foundation 4 top bar?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How to delay the display of the background image in a div

    How to use window height in css using jquery

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to make an element slide with the viewport as it scrolls?

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    How to style the arrow that opens submenus in jQuery mmenu?

    CSS: How to refer to a tag

    Show/Hide Div in jQuery, issue with “skipping” divs

    How to hide all checkboxes using CSS

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?

    How to use one single png image to create multiple website buttons (and their hovers)