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我想用作提交按钮，一个带有validate类。这不是常规提交按钮，但在这种情况下如何提交表单？我在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属性。

即使在我的javascript调用提交之前，不显眼的验证也会失败

1 个答案: