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

我有一个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>
}

…但出于某种原因，在调用此javascript代码之前，@Html.PasswordFor文本框会被删除，验证会提示我需要输入一个有效的pin码（即使我刚刚输入了一个有效的pin码）

我有jQuery代码，当用户在键盘上键入时，它会更新EmployeeId和Pin码。我开始认为，不引人注目的验证机制没有看到这些值已经更新，因此它认为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();

}))

您的

$（'#键盘li'）。单击（函数（）{

将当前输入设置为相关

li

元素的文本值

如果是

Submit

，它将当前数字输入的值设置为不是有效数字的值

“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);
});

或者修改选择器以使用

class=“validate”

元素排除

li

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

---

旁注：没有必要将

new{@Id=“IdEmployee”}

添加到控件中。您只需将

Id

属性的值覆盖为它已经存在的值。

谢谢Stephen，我不敢相信我没有看到。但我了解到，当内容无效时，默认行为就是这样做。谢谢！！

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