1

我正在尝试在我的网络应用程序中构建一些验证，但遇到了一个小问题。我有一个 asp 下拉列表和一个文本框，如果有人从下拉列表中选择“其他”，我想强制使用该文本框。当我选择其他时验证有效，但如果我决定选择另一个选项并单击保存按钮，即使下拉列表的选定值不是其他，它仍然要求我在文本框中输入一个值。

这是我的jQuery函数：

$(function() {

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

        val = $('#ddlRefTo').val();
        alert(val);
        $("#form1").validate({

            rules: {

                txbRefToOther: val == "Other" ? "required" : "notrequired",
                txbRefConcern: "required"

            },
            messages: {
                txbRefConcern: "*This field is mandatory",
                txbRefToOther: "*This field is mandatory"

            },

            ignore: ""
        });
    });
});

警报显示值的变化正在被提取，但由于某种原因，验证部分仍然坚持我在文本框中输入了一个值，即使 val=something different to 'Other'。

任何帮助将不胜感激。谢谢

更新

我玩过自定义验证，但仍然遇到一些问题。这是我的自定义验证方法：

$.validator.addMethod("Test", function(value, element) {

        var val = $('#ddlRefTo').val();

        if (value.length==0 && val=="Other") {

            //INVALID
            return false;
        }
        // VALID
        else return true;
    },
             "*This field is required.");

我指的是这样的：

$("#form1").validate({
        rules: {
            txbRefToOther: {
                required: true,
                Test: true

            }
        }
    });

但是，一旦我提交，无论在下拉列表中选择什么，都会触发验证错误，并且只有在我在文本框中输入内容时才会停止。

但是，如果我在下拉列表而不是文本框上设置验证，如下所示：

$.validator.addMethod("Test", function(value, element) {

  if (value=="Other" && $('#txbRefToOther').val()=="") {

              //INVALID
               return false; 
           }
           // VALID
          else return true; 
            },
             "*This field is required.");

$("#form1").validate({
          rules: {
                ddlRefTo:{
                            required: true,
                           Test: true

                        }
                    }
        });

它按我想要的方式工作，但错误消息显示在下拉列表中！为什么第一个版本不起作用？如果有帮助，这是我的 HTML：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script  type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
......
......
<table width="530">
<tr>
<td class="Label" width="80">Referring to</td>
<td width="120"><asp:DropDownList id="ddlRefTo" runat="server" CssClass="textbox" Font-Size="9pt" Width="110">
        <asp:ListItem Text="Test1" Value="Test1"></asp:ListItem>
        <asp:ListItem Text="Test2" Value="Test2"></asp:ListItem>
        <asp:ListItem Text="Test3" Value="Test3"></asp:ListItem>
        <asp:ListItem Text="Other" Value="Other"></asp:ListItem>
</asp:DropDownList>

</td>
<td class="Label" align="right" width="170">If 'Other', Please specify</td>
<td><asp:TextBox ID="txbRefToOther" runat="server" CssClass="textbox" Width="150"></asp:TextBox></td>
</tr>
</table>
<asp:Button ID="submit" runat="server" Text="Click" />
4

1 回答 1

1

尝试仅将消息设置为所需的验证：

messages:{
    txtRefToOther:{
        required: "*This field is mandatory"
    }

另外，什么不是必需的？确保您已将其定义为自定义方法。

根据您的评论，我认为您最好的选择是添加一个自定义方法来处理此验证。这是自定义方法：

 jQuery.validator.addMethod("conditionallyRequired", function (value, element, params) {
    if ($("'#" + params + "'").val() == "Other") && value == ''{
         return false; //INVALID
    }
    return true; // VALID
}, "*This field is required." //VALIDATION MESSAGE      
);

// connect it to a css class 
jQuery.validator.addClassRules({
    conditionallyRequired: { conditionallyRequired: true }
});

此方法将检查 ddlRefTo 是否为“其他”以及此文本框是否为空白。如果是，它将返回 false - 无效。将该方法应用于您的文本框：

txtRefToOther:
{
    conditionallyRequired: ddlRefTo
}
于 2013-07-11T13:17:36.163 回答