Question

我有一个TextBox和一个Button，我正在使用JQuery验证它们。我正在使用CSS样式来自定义文本框。

我的CSS是：

<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>

我的JQuery是：

<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>

如果在文本框中按Enter键或按“搜索”按钮时，如果里面的值为空，我如何修改上面的JQuery代码以将TextBox的类更改为TextBox1Error？

我尝试添加$j('TextBox1').addClass('TextBox1Error'); inside where the alert`正在显示，但其余代码无效。

Answer 1

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');
    });
});

示例：

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

至于在搜索框中输入，代码将类似，但只需进入你的keyPress功能。

<强>更新

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/

如何根据输入更改TextBox类

1 个答案: