有条件地禁用验证

Question

我的表单带有几个经过验证的文本框（服务器端和客户端）。在表单中，我有按钮：“下一步”、“后退”、“取消L”。因此，我不需要验证即可启动，然后用户单击“后退”或“取消”按钮。我怎样才能实现这个目标？ 提前致谢！

---

一些示例：

<div class="buttons">    
<input type="submit" name="cancelButton" value="" />
<input type="submit" name="backButton" value="" />
<input type="submit" name="nextButton" value="" />
</div>

<% using (Html.BeginForm()) { %>
    <p>

    <table style="width: 200px">    
    <tr><td align="center" colspan=2><%= Html.ValidationMessageFor(m => m.street) %><%= Html.DropDownListFor(m => m.street, Model.streetsList) %></td></tr>
    <tr><td colspan=2>&nbsp;</td></tr>
    <tr><td valign="bottom" align="right" style="width: 75px"><%= Html.LabelFor(m => m.flatNumber) %>:</td><td align=left><%= Html.TextBoxFor(m => m.flatNumber, new { maxlength = 6, style = "width: 48px;" })%> <%= Html.ValidationMessageFor(m => m.flatNumber) %></td></tr>
    </table>
    <br />

        <input type="submit" class="refusal button red floatL" name="cancelButton" value="" />
        <input type="submit" class="back button green floatL" name="backButton" value="" />
        <input type="submit" class="continue button green floatR marR" name="nextButton" value="" />
    </div>
    <div class="clear">
    </div>
    <% } %>

在服务器端，我使用 DataAnnotations 属性进行验证。

Answer 1

Button 类有一个 CausesValidation 属性 - 如果将其设置为 false，则回发时不会触发验证。

示例：

<asp:Button id="btnCancel" CausesValidation="false" onClick="bntCancel_Click" Text="Cancel" runat="server" />

请注意，这将禁用 ASP.NET 验证器 - 如果您有自己的验证器，则需要以其他方式禁用它。

Answer 2

用表单包围文本框，然后将“下一步”、“后退”和“取消”变成提交按钮。在事件 onsubmit 上，分配一个方法，如果表单有效并且应继续将其发送到服务器，则该方法返回 true，否则返回 false。

因此，我希望得到以下内容：

<form id="navigatorForm">
    <!-- Various text forms here -->

    <input type="submit" value="Back" onsubmit="back()" />
    <input type="submit" value="Next" onsubmit="next()" />
    <input type="submit" value="Cancel" onsubmit="cancel()" />
    <input type="hidden" id="operation" name="operation" value="" />
</form>

<script type="text/javascript">
function validate() {
    // Perform validation here
    // If okay, return true, else false
}

function next() {
    document.getElementById('operation').value = 'next';
    if(!validate()) {
        alert('Form is not filed correctly.  Please pay more attention!');
        return false;  // Do not send to server!  
    } else {
        return true;
    }
}

function back() {
    document.getElementById('operation').value = 'back';
    return true;
}

function cancel() {
    document.getElementById('operation').value = 'cancel';
    return true;
}
</script>

请注意，与 next() 不同，back() 和 cancel() 无条件返回 true，这意味着请求在任何情况下都会发送到服务器。此时，在服务器端，您只需检查下一步是否有操作即可知道是否应该执行进一步的测试。