проверка формы в MVC3 с использованием JavaScript

Question

Мне просто нужен пример для одной проверки. Для остального я сделаю. Допустим, у меня есть ввод типа текста:

 <p>                          
<label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%>         
 </p>        

Здесь я хочу проверить текстовое поле для обязательного поля. Мне нужна эта обязательная функция проверки полей в JavaScript, и я хочу использовать этот скрипт в представлении.

Answer 1

Рассматривали ли вы использование ненавязчивой проверки?

Вы говорите, что используете MVC3 (хотя, по-видимому, не механизм просмотра Razor).

С таким кодом: <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.

Если вы поместите это в ваш файл web.config:

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

, а затем украсите свойство в вашей модели с помощью чего-то вроде этой аннотации данных:

[Display(Name = "Name")]
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }

Затем, добавив следующее в ваш файл _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>

Затем вы можете добавить это где-то на странице (где вы хотите, чтобысообщение проверки будет показано): @Html.ValidationMessageFor(model=>model.Name)

Answer 2

Попробуйте этот code.it работать на моей стороне, вы должны попробовать:

 <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())
{
}
}

Answer 3

Теперь <%= Html.TextBoxFor(model => model.Name)%> - это ключ, который вы должны дать ID каждому из ваших элементов, которые вы хотите использовать для проверки на ..

, так что он будет выглядеть так:

<%= Html.TextBoxFor(model => model.Name,new { id="ClientNameTxt"})%>

если вы уже определили некоторые сценарии (файлы .js) и хотите реализовать это представление, используйте

<script src="@Url.Content("~/Scripts/yourjsfile.js")" type="text/javascript"></script>

и используйте функции ur для проверки или написания нового сценария

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

в конце это будет выглядеть так:

                 <!--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>

, если у вас все еще есть проблемы с этой проблемой!Я полагаю, ваше решение - это тренировать себя с помощью -> jquery