Question

我在使用jQuery验证以下方案中的文本框时遇到问题。我有3组名字，姓氏和位置输入框。

当提供名字或姓氏或两者时，我还需要设置“位置”输入框，但仅限于该组。

如果其他两组名字和姓氏都是空的，我不想让位置输入框变为必需。

请告知我如何使用jQuery客户端验证来实现这一目标。

<div id="divNamesAndLocation" style="display: none;">
    @for (int i = 0; i < 3; i++)
    {
        <div class="row">
            <div class="col-sm-4 form-group">
                @Html.LabelFor(x => x.NamesAndLocation[i].FirstName)
                @Html.ValidationMessageFor(x => x.NamesAndLocation[i].FirstName)
                @Html.TextBoxFor(x => x.NamesAndLocation[i].FirstName)
            </div>
            <div class="col-sm-4 form-group">
                @Html.LabelFor(x => x.NamesAndLocation[i].LastName)
                @Html.ValidationMessageFor(x => x.NamesAndLocation[i].LastName)
                @Html.TextBoxFor(x => x.NamesAndLocation[i].LastName)
            </div>
            <div class="col-sm-4 form-group">
                @Html.LabelFor(x => x.NamesAndLocation[i].Location)
                @Html.ValidationMessageFor(x => x.NamesAndLocation[i].Location)
                @Html.TextBoxFor(x => x.NamesAndLocation[i].Location)
            </div>
        </div>
    }
</div>

Answer 1

以下是使用jquery验证的方法。请试试你的bootstrap。我知道这是有效的，因为我测试了它。这是控制器：

public class NamesAndLocation
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Location { get; set; }
}

public class NamesAndLocationList
{
    public IList<NamesAndLocation> NamesAndLocation { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index10()  //this Method name can change
    {
        NamesAndLocationList list = new NamesAndLocationList();
        list.NamesAndLocation = new List<NamesAndLocation>();
        list.NamesAndLocation.Add(new NamesAndLocation { FirstName = "fn1", LastName = "ln1", Location = "loc1" });
        list.NamesAndLocation.Add(new NamesAndLocation { FirstName = "fn2", LastName = "ln2", Location = "loc2" });
        list.NamesAndLocation.Add(new NamesAndLocation { FirstName = "fn3", LastName = "ln3", Location = "loc3" });

        return View(list);
    }

以下是观点：

@model Testy20161006.Controllers.NamesAndLocationList
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index10</title>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"
            integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0="
            crossorigin="anonymous"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function () {
                alert("submitted!");
            }
        });
        $().ready(function () {
            $("#signupForm").validate({
                rules: {
                    location0:
                        {
                            required: function (element) {
                                var mybool = $("#fname0").val() == "" || $("#lname0").val() == ""
                                return mybool;
                            }
                        },
                    location1:
                        {
                            required: function (element) {
                                var mybool = $("#fname1").val() == "" || $("#lname1").val() == ""
                                return mybool;
                            }
                        },
                    location2:
                        {
                            required: function (element) {
                                var mybool = $("#fname2").val() == "" || $("#lname2").val() == ""
                                return mybool;
                            }
                        }
                },
                messages: {
                    location0: "Please add location1",
                    location1: "Please add location2",
                    location2: "Please add location3"
                }
            });
        });
    </script>
</head>
<body>
    @using (Html.BeginForm("", "", FormMethod.Get, new { id = "signupForm" }))
    {
        for (int i = 0; i < 3; i++)
        {
            <div class="row">
                <div class="col-sm-4 form-group">
                    @*we have Name and name attributes, but Name is parsed first*@
                    @Html.LabelFor(x => x.NamesAndLocation[i].FirstName)
                    @Html.ValidationMessageFor(x => x.NamesAndLocation[i].FirstName)
                    @Html.TextBoxFor(x => x.NamesAndLocation[i].FirstName, new { id = "fname" + i.ToString(), Name = "fname" + i.ToString() })
                </div>
                <div class="col-sm-4 form-group">
                    @Html.LabelFor(x => x.NamesAndLocation[i].LastName)
                    @Html.ValidationMessageFor(x => x.NamesAndLocation[i].LastName)
                    @Html.TextBoxFor(x => x.NamesAndLocation[i].LastName, new { id = "lname" + i.ToString(), Name = "lname" + i.ToString() })
                </div>
                <div class="col-sm-4 form-group">
                    @Html.LabelFor(x => x.NamesAndLocation[i].Location)
                    @Html.ValidationMessageFor(x => x.NamesAndLocation[i].Location)
                    @Html.TextBoxFor(x => x.NamesAndLocation[i].Location, new { id = "location" + i.ToString(), Name = "location" + i.ToString() })
                </div>
            </div>
        }
        <input type="submit" value="submit" />
    }
</body>
</html>

Answer 2

这适用于div：

def border(x,y):
    for p in range(x+1):
        yield (p,0)
        yield (p,y)
    for p in range(1,y):
        yield (0,p)
        yield (x,p)

jQuery / MVC条件验证

2 个答案: