javascript - 不引人注目的验证甚至在我的 javascript 调用提交之前就失败了

Question

我有一个 ASP.NET MVC 应用程序，其表单定义为:

@using (Ajax.BeginForm("Identify", "Employee", new AjaxOptions()
{
    HttpMethod = "POST",
    OnSuccess = "Identify.OnSuccess(data, status, xhr)",
    OnFailure = "Identify.OnFailure(xhr, status, error)"
}, new { id = "identifyForm"}))
{
    <div id="employeeIdContainer">
        @Html.LabelFor(m => m.IdEmployee) : <br/>
        @Html.TextBoxFor(m => m.IdEmployee, new {@type = "number", @Id = "IdEmployee"})
        <span class="validation">
        @Html.ValidationMessageFor(m => m.IdEmployee)
    </span>
    </div>

    <div id="pinContainer">
        @Html.LabelFor(m => m.Pin) : <br/>
        @Html.PasswordFor(m => m.Pin, new {@type = "number", @maxlength = "4", @Id = "Pin"})
        <span class="validation">
        @Html.ValidationMessageFor(m => m.Pin)
    </span>
    </div>

    <div>
        <input class="validate" type="submit" value="Submit" name="identifyButton"/>
    </div>

    <div id="keyboardContainer">
        <ul id="keyboard">
            <li class="number">1</li>
            <li class="number">2</li>
            <li class="number">3</li>
            <li class="validate">Submit</li>
            <li class="number line">4</li>
            <li class="number">5</li>
            <li class="number">6</li>
            <li class="delete">Corriger</li>
            <li class="number line">7</li>
            <li class="number">8</li>
            <li class="number">9</li>
            <li class="number line hidden"></li>
            <li class="number">0</li>
            <li class="number hidden"></li>
        </ul>   
    </div>
}

在表单中，我有一个 ul，我将其设置为键盘样式，该键盘有一个 li，我想将其用作提交按钮，即具有验证类的按钮。这不是一个常规的提交按钮，但在这种情况下我该如何提交表单呢？我在 javascript 中尝试了以下内容:

 $("#keyboard li.validate").click(function () {
    if ($("#identifyForm").valid()) {
        $("#identifyForm").submit();
    }
});

...但出于某种原因，甚至在调用此 javascript 代码之前，@Html.PasswordFor 文本框被删除并且验证开始说我需要输入有效的密码(即使我刚刚输入有效的密码一个)。

我有 jQuery 代码，可以在用户在键盘上键入时更新 EmployeeId 和 Pin 号码。我开始认为 Unobtrusive 验证机制没有看到这些值已更新，因此它认为 Pin 号码仍然是空的。如果有帮助，这里是 jQuery 代码:

var keyboard = $(function () {

var currentInput = $("#IdEmployee");

$("#Pin").on("focusin", function() {
    currentInput = $("#Pin");
});

$("#IdEmployee").on("focusin", function() {
    currentInput = $("#IdEmployee");
});

$('#keyboard li').click(function () {
    var $this = $(this),
        character = $this.html();

    if ($this.hasClass('delete')) {
        var html = currentInput.val();
        currentInput.val(html.substr(0, html.length - 1));
        return false;
    }
    currentInput.val(currentInput.val() + character);
});

$("#keyboard li.validate").click(function () {
    if ($("#identifyForm").valid()) {
        $("#identifyForm").submit();
    }
});

$("#IdEmployee").focus();

});

Answer 1

你的 $('#keyboard li').click(function () {正在将当前输入设置为关联的文本值 li元素。

在<li class="validate">Submit</li>的情况下它将当前数字输入的值设置为值 "Submit"这不是有效数字，因此验证失败。并且因为它无效，内容被清除(这是 HTML5 控件的默认行为)

您可以将脚本修改为

$('#keyboard li').click(function () {
  var $this = $(this),
      character = $this.html();
  if ($this.hasClass('validate')) {
    return;
  } else if ($this.hasClass('delete')) {
    var html = currentInput.val();
    currentInput.val(html.substr(0, html.length - 1));
    return false;
  }
  currentInput.val(currentInput.val() + character);
});

或修改选择器以排除 li与 class="validate"元素

$('#keyboard li:not(.validate)') {

旁注:没有必要添加 new { @Id = "IdEmployee"}到你的控制。你只是覆盖了 id具有它已经存在的值的属性。