2017-01-04 15 views
0

以下のシナリオでは、jQueryを使用してテキストボックスの検証に問題があります。 私は、姓、名字、および場所入力ボックスの3つのセットを持っています。jQuery/MVC条件付き検証

名前または姓またはその両方が指定されている場合は、「場所」入力ボックスも必要になりますが、そのセットのみにする必要があります。

他の2組の名字と姓が空白の場合、場所の入力ボックスを必要としたくありません。

これを実現する方法については、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> 
+0

ボックス検証属性のうちで、私は良いを見つけたことはありませんソリューションであり、多くの場合、https://github.com/JeremySkinner/FluentValidationまたはhttps://foolproof.codeplex.com/ –

+0

に依存しています。独自の検証属性を記述します - [ASP.NET MVC 3での検証の完全ガイド - 第2部] (ht tp://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2) –

答えて

0

これはdivのために動作します:

@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() { 
      //this is on the click event, but you can put it outside of onclick for on page load 
      $("#btnClick").click(function (event) { 
       $("#divlocationmsgtouser1").val(""); 
       $("#divlocationmsgtouser2").val(""); 
       $("#divlocationmsgtouser3").val(""); 

       //COPY FROM HERE FOR OTHER ROWS 
       if (!$("#divfname0").length || !$("#divlname0").length) 
       { 
        alert("fname or lname row one div does not exist") 
        if (!$("#divlocation0").length) { 
         alert("location row one div needs to exist as fname and/or lname row one div does not-will not submit") 
         $("#divlocationmsgtouser1").text("Location row One div does not exist and fname and/or lname row One does not exist"); 
         event.preventDefault(); 
        } 
       } 
       else 
       { 
        alert("first and last name row one div exists, so it doesn't matter if location row one div exists") 

       } 
       //END COPY 

      }); 

     }); 
    </script> 
</head> 
<body> 
    @using (Html.BeginForm("Index10", "Home", FormMethod.Post, new { id = "signupForm" })) 
    { 
     for (int i = 0; i < 3; i++) 
     { 
      //credit to http://stackoverflow.com/questions/21322639/asp-net-mvc-razor-foreach-loop-adding-id-to-div 
      <div class="row"> 
       @*!CHANGE the div name below from divfname to divfnameNADA AND change the divlocation to divlocationNADA to see NOT POSTING*@ 
       <div class="col-sm-4 form-group" id="@string.Format("divfnameNADA{0}",i)"> 
        @*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" id="@string.Format("divlname{0}",i)"> 
        @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" id="@string.Format("divlocationNADA{0}",i)"> 
        @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> 
     } 
     <div id="divlocationmsgtouser1"></div> 
     <div id="divlocationmsgtouser2"></div> 
     <div id="divlocationmsgtouser3"></div> 
     <input type="submit" value="submit" id="btnClick" /> 
    } 
</body> 
</html> 
0

jquery検証を使用してこれを行う方法です。あなたのブートストラップで試してみてください。私はそれをテストしたので、この作品が分かります。ここでは、コントローラは次のとおりです。ここで

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

控えてくださいhttp://stackoverflow.com/questions/10406089/jquery-validate-plugin-require-field-if-another-field-has-a-value-and-vice versa – kblau

+0

このコードはありがとうございます。現在、このコードは.validate()関数を使用しています。しかし、私はフォームのレイアウトのウィザードの種類があり、私はフォームではなくdivを検証する必要があります。 validate()関数がdivで機能しないようです – user2998453