javascript - 使用无效字段强制提交表单

问题描述

我可以强制提交带有无效文本字段的表单吗？或者我可以强制无效字段有效，以便我可以提交表单？

我有一个带有 2 个提交按钮的表单。如果进行远程呼叫并输入正确的值（4 位密码），则禁用并启用提交。第二个按钮应该绕过密码字段提交表单。我为用户提供了选择不输入密码值的选项，因此即使密码字段无效，我也希望能够提交表单，但我不知道该怎么做！我尝试在 javascript/Jquery 中重置验证并重置表单，但似乎没有任何效果。我可以在按下按钮时进行 Ajax 调用，但我更喜欢使用表单后调用。

我可以强制提交包含无效字段的表单，还是可以将表单设置为有效？我在 C# 的视图模型中同时具有字段的 html 数据属性和数据属性。我想所有都需要被禁用或绕过才能提交！我已经阅读了可以使用 JQuery 验证调用来重置或删除 HTML 属性，我在下面的示例 JS 代码中尝试了它，但是 c# 中的视图模型属性呢？

这是我一直在努力展示的一个网络小提琴。下面的代码只是小提琴的复制和粘贴，而 javascript 只是我尝试重置/清除无效字段的示例

$("#finish").off('click').on('click', function() {
  $("#Finish").val(true);
  $("#RatingValueHidden").val($("#hostRating").val());


  //$("#rateForm").validate().resetForm();
  //$("#PointCode").val("0000");

  //$("#PointCode").rules("add", {
  //    required: false,
  //    minlength: 0,
  //    maxlength: 0
  //});

  //var validator = $("#rateForm").validate();

  //$("#rateForm").data("validator").resetForm()

  //var isValid = $("#rateForm").valid();
  //validator.resetForm();
  //$("#rateForm").submit();

  

});

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>

  <!-- CSS Includes -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <style type="text/css">
    .field-validation-error {
      color: #ff0000;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-md-6 col-md-offset-3">
      <h1>Enter 4 digit code</h1>

      @using (Html.BeginForm()) {
      <div class="form-group">
        @Html.TextBoxFor(model => model.PointCode, new { @class = "form-control input-lg", @placeholder = "4 Digit Code", @maxlength = "4", @type = "number", @min = "1000", @max = "9999", @title = "Your point code is a 4 digit number" }) @Html.ValidationMessageFor(model
        => model.PointCode)
      </div>
      <div class="form-group">
        <div style="margin: auto; margin-bottom: 20px;">
          <button id="finish" class="btn-yb btn btn-default btn-lg btn-block" type="submit">No Thanks, I'm done</button>
        </div>


        <div style="margin: auto;">
          <button id="rateReview" class="btn-yb btn btn-default btn-lg btn-block" type="submit" disabled>Rate and Review</button>
        </div>
      </div>


      }

      <br/><br/>
      <div class="alert alert-warning fade">
        <img src="http://entechprod.blob.core.windows.net/dotnetfiddle/morpheus.jpg" style="max-width:100%;" /><br/><br/>
        <strong><span class="alert-content"></span></strong>
      </div>
    </div>
  </div>


</body>

</html>

在我的视图模型中，我有这个字段用于远程调用

    [MinLength(4, ErrorMessage = "Your point code is a 4 digit number")]
    [MaxLength(4)]
    [Remote("IsPointCodeCorrect", "Rate", HttpMethod = "Get", ErrorMessage = "The point code entered is incorrect", AdditionalFields = "EventId")]
    public int? PointCode { get; set; }

我的文本字段看起来像这样

<div id="inputGroupPointCode" class="input-group textbox-style" style="width: 100%;">
  @Html.TextBoxFor(m => m.PointCode, new { @class = "form-control input-lg", @placeholder = "4 Digit Code", @maxlength = "4", @type = "number", @min = "1000", @max = "9999", @title = "Your point code is a 4 digit number" })
</div>

标签： javascriptc#jqueryhtmlasp.net-mvc

javascript - 使用无效字段强制提交表单

问题描述

解决方案

推荐阅读