Question

嗨，我试图使用jquery验证空文本框。我只是想改变无效的文本框的颜色。

我尝试使用以下代码。

<td width="10%" class="td">
    <asp:TextBox runat="server" ID="txtRemark" ClientIDMode="Static" TextMode="MultiLine" CssClass="remarks"></asp:TextBox>
</td>
<asp:Button runat="server" ID="imgSubmit" Text="SUBMIT" OnClientClick="validate()" ClientIDMode="Static" />
$("#imgSubmit").click(function validate() {
    var name = $("#<%=txtRemark.ClientID %>").val();
    if (name == "") {
        alert("Validation working");
        $("#txtRemark").css({
            "border": "1px solid red",
            "background-color": "#FFCECE"
        });
    } else {
        alert("Welcome: " + name);
    }
});

但是这个CSS没有应用到文本框。我已经包含了jquery-1.9.1.js，jquery-ui.css，jquery-ui.js，jquery-1.7.2.min.js。

我开始工作了警报，但CSS没有应用，我在某处错了..，请帮助我。在此先感谢。

Answer 1

您不能在click方法中使用命名函数，而是将其用作回调。

function validate(){...}

$("#imgSubmit").click(validate);

或者只是替换命名函数

$("#imgSubmit").click(function validate() {

带

$("#imgSubmit").click(function(){

Answer 2

试试这个...

    <td   width="10%" class="td">
                    <asp:TextBox runat="server" ID="txtRemark" ClientIDMode="Static" TextMode="MultiLine" CssClass="remarks" ></asp:TextBox>
        </td>
        <asp:Button runat="server" ID="imgSubmit" Text="SUBMIT" OnClientClick="validate()" ClientIDMode="Static" />

       $("#imgSubmit").click(function () {

            var name = $("#<%= txtRemark.ClientID %>").val();
             if (name == "") {  
                 alert("Validation working");  
                $("[id$='<%= txtRemark.ClientID %>']").css({
                                  "border": "1px solid red",
                                  "background-color": "#FFCECE"
                 });

             }
             else {
                 alert("Welcome: " + name);
             }
return false;

         });

Answer 3

您是否尝试过使用CssClass而不是asp：Textbox的ID，还删除了javascript中的冒号，就像这样

$(".remarks").css("border", "1px solid red");
$(".remarks").css("background-color", "#FFCECE");

Answer 4

在您应用<%=txtRemark.ClientID %>时使用txtRemark代替css，并从按钮控件中移除OnClientClick="validate()"，例如

<td width="10%" class="td">
    <asp:TextBox runat="server" ID="txtRemark" ClientIDMode="Static" TextMode="MultiLine" CssClass="remarks"></asp:TextBox>
</td>
<asp:Button runat="server" ID="imgSubmit" Text="SUBMIT" OnClientClick="validate()" ClientIDMode="Static" />

将您的代码包裹在document.ready()中，例如

$(function(){
    $("#imgSubmit").click(function() {
        var name = $("#<%=txtRemark.ClientID %>").val();
        if (name == "") {
            alert("Validation working");
            $("#<%=txtRemark.ClientID %>").css({ // use <%=txtRemark.ClientID %> here also
                "border": "1px solid red",
                "background-color": "#FFCECE"
            });
        } else {
            alert("Welcome: " + name);
            $("#<%=txtRemark.ClientID %>").removeAttr('style'); // remove applied css
        }
        return false;// use to prevent reload page
    });
});

否则，您可以尝试使用html controls代替asp.net，

<td width="10%" class="td">
    <input type='text' id="txtRemark" class="remarks" />
</td>
<input type="submit" id="imgSubmit" value="SUBMIT" />

$(function(){
    $("#imgSubmit").click(function() {
        var name = $("#txtRemark").val();
        if (name == "") {
            alert("Validation working");
            $("#txtRemark").css({
                "border": "1px solid red",
                "background-color": "#FFCECE"
            });
        } else {
            alert("Welcome: " + name);
            $("#txtRemark").removeAttr('style'); // remove applied css
        }
        return false;// use to prevent reload page
    });
});

css不适用于Jquery Validations中的文本框

4 个答案: