javascript 使用javascript验证MVC3中的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9497226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
validating form in MVC3 using javascript
提问by Santosh
I just need example for one validation. For remaining I will do. Let's say I have an input of type text:
我只需要一个验证的例子。剩下的我会做的。假设我有一个文本类型的输入：
<p>
<label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%>
</p>
Here I want to validate textbox for required field. I want this required field validation function in JavaScript and I want to use this script in the view.
在这里，我想验证必填字段的文本框。我想在 JavaScript 中使用这个必需的字段验证函数，我想在视图中使用这个脚本。
回答by Tom Chantler
Have you considered using unobtrusive validation?
您是否考虑过使用不显眼的验证？
You say you are using MVC3 (although not the Razor view engine apparently).
您说您正在使用 MVC3（尽管显然不是 Razor 视图引擎）。
With your code like this: <p><label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%></p>which could be written as
<p>@Html.LabelFor(model=>model.Name) @Html.TextBoxFor(model => model.Name) </p>in Razor syntax.
使用这样的代码：<p><label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%></p>可以用<p>@Html.LabelFor(model=>model.Name) @Html.TextBoxFor(model => model.Name) </p>Razor 语法编写
。
If you put this in your web.config:
如果你把它放在你的 web.config 中：
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
and then decorate the property in your model with something like this data annotation:
然后使用类似以下数据注释的内容装饰模型中的属性：
[Display(Name = "Name")]
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
Then by adding the following into your _Layout.cshtmlfile you will get unobtrusive validation to work:
然后通过将以下内容添加到您的_Layout.cshtml文件中，您将获得不显眼的验证：
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Then you could add this somewhere on the page (where you want the validation message to be shown): @Html.ValidationMessageFor(model=>model.Name)
然后你可以在页面的某处添加它（你想要显示验证消息的地方）： @Html.ValidationMessageFor(model=>model.Name)
回答by Deepakmahajan
Try this code.it work on my side you should try:
试试这个代码。它对我有用，你应该试试：
<form id="formname" post="" action="">
<ul>
<li>
<input type="text" name="TimeArrived" id="TimeArrived" class="required" /></li>
<li><input type="text" name="Name" id="Name" class="required" />
</li>
<li>
<input type="button" name="Save" value="Save" onclick="return Submit();" /></li>
</ul>
</form>
$(document).ready(function () {
var frm = $("#formname");
frm.validate();
});
function Submit() {
var f = $("#formname");
if (f.valid())
{
}
}
回答by Berker Yüceer
Now <%= Html.TextBoxFor(model => model.Name)%>is the key here u should give an ID to each of your elements that you want to use validation on..
现在<%= Html.TextBoxFor(model => model.Name)%>是这里的关键，您应该为要在其上使用验证的每个元素提供一个 ID。
so its gonna look like;
所以它会看起来像；
<%= Html.TextBoxFor(model => model.Name,new { id="ClientNameTxt"})%>
if you already defined some scripts (.js files) and want to implement to this view then use
如果你已经定义了一些脚本（.js 文件）并且想要实现到这个视图然后使用
<script src="@Url.Content("~/Scripts/yourjsfile.js")" type="text/javascript"></script>
and use ur functions to validate or else write new script
并使用您的函数来验证或编写新脚本
<script type="text/javascript">
$(document).ready(function () {
var frm = $("#formname");
frm.validate();
});
$('#formname').Submit(function (event) {
/* Call ur form with the id you have given */
var f = $("#formname");
if (f.valid()) { /* When the form is valid */
} else { /* When the form is not valid */
event.preventDefault(); /* Prevent from submitting the form */
$("#ClientNameTxt").highlight(); /* Do some validation stuff on ur validation required element */
}
});
</script>
at the end it will look like;
最后它看起来像；
<!--Your form name, Controller name-->
@using (Html.BeginForm("Formname", "ControllerName", FormMethod.Post,new { id="Formname", onkeypress="return event.keyCode != 13;"}))
{
<p>
<label for="ClientName">ClientName:</label> <!--Give an ID to your element-->
<%= Html.TextBoxFor(model => model.Name, new { id="ClientNameTxt" })%>
</p>
}
<script type="text/javascript">
$(document).ready(function () {
var frm = $("#formname");
frm.validate();
});
$('#formname').Submit(function (event) {
/* Call ur form with the id you have given */
var f = $("#formname");
if (f.valid()) { /* When the form is valid */
} else { /* When the form is not valid */
event.preventDefault(); /* Prevent from submitting the form */
$("#ClientNameTxt").highlight(); /* Do some validation stuff on ur validation required element */
$("#Formname").append('<ul><li> Fill the empty areas and try again. <li><ul>');
/* This is the worst i can do. Just to let you understand it easly. */
}
});
</script>
if u still have problems with this issue! i guess ur solution is at training your self with the --> jquery
如果你仍然有这个问题的问题！我猜你的解决方案是用 --> jquery训练你自己
