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 select this td element?

    How to add css in django Updateview or Create view form

    How can I make vertical switch

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How to apply styles to a group of Labels in javafx without css

    How to add image, that overlapping Bootstrap modal?

    How to write special css for IE in external css file using css conditional comments [closed]

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    How to define link text color in UIWebView

    How to use css to find a list element in css alone, i.e. not be css3 dependent?

    How to get this code to behave differently based on what exactly is clicked?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to make a toggleable navbar in pure CSS?

    How to center a relative div in my case?

    How to keep image position despite window/device size?

    How to create a pulsing glow ring animation in CSS?

    How can give third child div within one parent div

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How to target specific img using css

    HTML+CSS: How to add shadow (as image) to image?

    how to load multiple lazy css load file

    CSS How to get height between header and footer?

    How to pause .setInterval() on hover and on .click() of interior content?

    How to modify twitter widget in css

    How to set fixed base to calculate vh unit in css on mobile?

    how to make a input tag takes the rest of a td space in css?

    Base 64 CSS background image not showing in IE

    How to create a css hoverover box with two section

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    How to set css class 'active' by using C#?