我正在创建表单,我需要对某些字段进行一些验证,这些字段在正面和背面都是必填字段,并且只有在正确填写之前才能发送。

以下是带有字段的表格。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form> <div id="informacionTicket" class="user"> <div class="card shadow mb-4"> <div class="card-header py-3"> <h4 class="m-0 font-weight-bold text-primary"> Applicant</h4> </div> <div class="card-body"> <div class="mb-4"> <div class="form-group"> <label for="ticketIdAppliInput">Id:</label> <input maxlength="9" required id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user" /> </div> <div class="form-group"> <label for="ticketNameAppliInput">Full name:</label> <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" /> </div> <div class="form-group"> <label for="ticketEmailAppliInput">Email:</label> <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" /> </div> </div> </div> </div> </div> </form> <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button> 

以下是发送数据的JavaScript函数。

function f_submitForm() {
    form.append("ticketIdAppliInput", document.getElementById("ticketIdAppliInput").value);
    form.append("ticketNameAppliInput", document.getElementById("ticketNameAppliInput").value);
    form.append("ticketEmailAppliInput", document.getElementById("ticketEmailAppliInput").value);
}

更新:

添加最少的可复制示例,表单控制器

[HttpPost]
public JsonResult CreateNewTicket()
        {
            var ticketIdAppliInput = Request.Form["ticketIdAppliInput"];
            var ticketNameAppliInput = Request.Form["ticketNameAppliInput"];
            var ticketEmailAppliInput = Request.Form["ticketEmailAppliInput"];

        try
        {
            using (var scope = new TransactionScope())
            {               
                var ticket = new TK_HD_TICKETS
                {
                    CUSTOMER_ID = ticketIdAppliInput,
                    CUSTOMER_FULLNAME = ticketNameAppliInput,
                    CUSTOMER_EMAIL = ticketEmailAppliInput,
                    };
                    var result = ticketCreate.CreateNewTicket(ticket);

                    // If the ticket was not saved, the transaction is finished and we return the error message
                    if (!result.Success)
                    return Json(new TicketResult
                    {
                        IsValid = false,
                        Error = "The ticket could not be created, please try again."
                    });
            }
        }catch (DbEntityValidationException ex)
        {
            // Failed to try to register data in the database
            foreach (var e in ex.EntityValidationErrors)
            foreach (var validationError in e.ValidationErrors)
                Console.WriteLine("Property: " + validationError.PropertyName + " Error: " +
                                  validationError.ErrorMessage);

            return Json(new TicketResult
            {
                IsValid = false,
                Error = "There was an error creating the ticket, please try again."
            });
        }
        }

#1楼 票数:1

创建一个模型类:

public class MyData {
  [Required]
  [StringLength(9)]
  [Display(Name="Id")]
  public string ticketIdAppliInput {get;set;}
  [Required]
  public string ticketNameAppliInput {get;set;}
  [Required]
  public string ticketEmailAppliInput {get;set;}
}

更改您的控制器以将该类作为输入:

[HttpPost]
public ActionResult CreateNewTicket(MyData data) {
  if (ModelState.IsValid)
    return Json(...);
  return View(data);
}

然后将您的视图更改为实际使用此类(我将为您做第一个输入):

@model MyData
@using (Html.BeginForm())
{
  <div id="informacionTicket" class="user">
    <div class="card shadow mb-4">
      <div class="card-header py-3">
        <h4 class="m-0 font-weight-bold text-primary">
          Applicant</h4>
      </div>
      <div class="card-body">
        <div class="mb-4">
          <div class="form-group">
            @Html.LabelFor(model=>model.ticketIdAppliInput)
            @Html.TextboxFor(model=>model.ticketIdAppliInput, new { @type="text", @class="form-control form-control-user"})
            @Html.ValidationMessageFor(model=>model.ticketIdAppliInput)
          </div>
          <div class="form-group">
            <label for="ticketNameAppliInput">Full name:</label>
            <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" />
          </div>
          <div class="form-group">
            <label for="ticketEmailAppliInput">Email:</label>
            <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button>
}

#2楼 票数:0

在HTML中,您可以简单地使用所需的标记,并且有很多jquery库将为您提供验证以及显示弹出式自定义消息。

  ask by Sebastian Salazar translate from so

未解决问题?本站智能推荐:

3回复

asp.net mvc 5,验证非必填字段(可选字段)

我在asp.net mvc 5 应用程序中有一个不需要填写某些字段或可选字段的表单。 我已经尝试过这些东西,但是,“此字段是必需的”的警告消息,继续显示。 数据模型 索引.cshtml
1回复

如何使用AngularJS在C#中向我的后端提交表单?

我正在使用REST ASP.NET,我需要从前端表单中获取一些值,以便在后端中研究用c#编写的数据库。 我尝试使用本文获取POST变量 ,但是它根本没有用。
1回复

为什么我有2个不同的必填字段验证弹出窗口

我有2个不同的页面,每个页面上都有一个表单。 现在一页,如果我将必填字段留空,则会显示以下验证弹出窗口: 这是上面图像的代码: 但另一方面,我会看到一个弹出窗口,如果您问我,它具有相同的代码: 但我更喜欢后一种选择,我怎么总是得到它? 后者验证消息是否为
1回复

输入字段中的Glyphicons [重复]

这个问题已经在这里有了答案: 将Bootstrap Glyphicon添加到输入框 15的答案 如何在输入字段中放入字形? 我尝试了几种解决方案,但均无法正常工作,无论如何,“ ok”和“ remove”字形在输入之外仍然显示。 HTML: JavaSc
2回复

必填字段和客户端验证

我已经将[Required(ErrorMessage = "*")]放入模型中 在webconfig中将这些字段设置为true 和 按钮单击不检查验证,将其添加到控制器以进行服务器端验证 现在,它可以在服务器端进行验证,为什么客户端现在可以工作?
3回复

如何在MVC中的模型视图中重置字段的编辑器

我有一个可以在其中输入值的网页。 为此,我提供了类似这样的代码 会在网页的视图中为地址行1创建一个编辑器字段。 现在,单击“重置”按钮,我希望在Line1的编辑器中填充任何内容,应将其清除。 为此,我正在使用重置按钮和javascript,如下所示 但这对我不起作用。 尝
1回复

使用隐藏的输入字段替换数据库中的条目-Entity Framework

我有一个按钮下拉列表,每行显示一个人的姓名和他们的城市,这是从数据库中读取的。 这样做的目的是让用户单击下拉列表中的一项,并用其自己的名称(但仅针对该行)替换数据库中的用户名。 我觉得代码是正确的,但是当我单击用户名时没有任何反应,因此肯定有错误或遗漏。 现在,我已经尝试了两
1回复

JavaScript 输入验证 - 意外结果

我有这个事件监听器功能 在剃刀视图中使用以下标记 我正在尝试在用户提交之前前端验证 WarningMileage 值是否小于 ScheduledMileage 值(如果为 false 则显示错误)。 测试- 在预定里程字段中输入 10,在警告里程字段中输入 0结果- 显示错误