Как проверить обязательные поля в интерфейсе и бэкэнде

Question

Я создаю свою форму, и мне нужно сделать некоторые проверки некоторых полей, которые являются обязательными как спереди, так и сзади, и которые не разрешено отправлять до тех пор, пока они не будут заполнены должным образом.

форма с полями.

<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."
            });
        }
        }

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

Answer 2

В Html вы можете просто использовать обязательный тег, и есть много библиотек jquery, которые обеспечат вам проверку, а также покажут всплывающее настраиваемое сообщение.