防止通过提交事件中的 if 语句提交答案

【问题标题】：Preventing submission via if statement inside submit event防止通过提交事件中的 if 语句提交
【发布时间】：2020-12-16 23:50:31
【问题描述】：

$('.submitform').submit(function(event) {
  event.preventDefault();

  if (($(this).attr("modal-val") == 'modal1') && ($(this).attr("field-value") == '0')) {
    console.log('You can not submit 0');
    return;
  }

  console.log("This one continues to execute")

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1" data-hidden-val="a" name="submit_hidden" style="position: center;">Add</button>
</div>


<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form action="process.php" method="POST" class="submitform">
        <div class="modal-body">
          <div class="form-group">
            <label for="field-value">Field Value:</label>
            <input type="number" value="0" id="field-value" name="field-value">
          </div>
          <div class="form-group">
            <input type="hidden" value="modal1" id="modal-val" name="modal-val">
          </div>
          <div class="form-group">
            <input type="hidden" value="" id="subfield" name="subfield">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

我想在submit(function(event){}) 中进行表单验证。通常人们遵循以下步骤：

关于按钮点击调用验证功能。
验证表单并转发到提交功能（如果有效）。
如果未正确填写表单，请警告用户。

我想做的是：

致电submit(function(event){})。
在 if 块中检查验证。
如果表单经过验证，请继续。
如果未验证表单，则从 submit(function(event){}) 中断。

我想遵循这种做法，因为我正在访问提交按钮的一些数据属性并且不想传递它。

【问题讨论】：

让我们看看它运行
乍一看，代码似乎可以满足您的需求。这里有什么问题？
如果有人向提到的字段提交 0 但它继续执行，通常它应该停止执行。我写了我的数据库并收到了 POST 消息。
您可以使用 PHP 进行验证，但我不会。
旁注：永远不要让你的应用只包含客户端验证。这对用户来说是一种很好的接触，但它并不可靠。即使它没有按预期执行，服务器端验证也应该防止无效值进入数据库。

标签： javascript jquery

【解决方案1】：

你的情况是你的罪魁祸首：

if (($(this).attr("modal-val") == 'modal1') && ($(this).attr("field-value") == '0'))

问题是this 代表表单元素。您正在尝试访问表单上的属性，但表单没有它们 - 它具有您需要的 inputs，而正是它们具有这些属性。因此，您需要专门获取这些输入并获取它们的值：

if ($("#modal-val").val() == 'modal1' && $("#field-value").val() == '0')

它应该按预期执行。

【讨论】：

感谢您的努力。有没有办法可以通过$(this) 联系到modal-val。目前$(this).serialize() 可以为所有表单字段提供序列化字符串。获取这些字段的任何方式，例如$(this).getfield('modal-val')
可能有一种方法可以获取代表来自this 的输入的 jQuery 对象，尽管我不认为它可以比这种方法更简单。我认为没有你建议的getfield 这样的捷径。
我找到了获得modal-val 值的方法。 var formDataArray = $(this).serializeArray(); 之后，我可以通过键入formDataArray[1].value 之类的索引来达到modal-val 的值。对于我的示例，这将返回 modal1，它正是我需要的东西。通过 $("#modal-val").val() 访问对我来说是不可行的，因为我要发送 9 个模态到这个函数，modal-val 应该从表单数据派生。感谢您的努力。
这样更整洁。如果数组顺序不一致，则通过字段名访问。 stackoverflow.com/questions/4236768/…

【解决方案2】：

以下代码按预期工作。它将表单数据收集为一个数组，每个字段和值都可以访问。

<script>
    $('.submitform').submit(function(event) {
        event.preventDefault();
        
        //serialize the form into an array
        var formDataArray = $(this).serializeArray();
        //create empty array
        var formObj = {};

        //copy each element into array
        $(formDataArray).each(function(i, field) {
            formObj[field.name] = field.value;
        });

        //access with field names
        if ((formObj['modal-val'] == 'modal1') && (formObj['field-value'] == '0')) {
            console.log('You can not submit 0');
            return;
        }

    })
</script>

【讨论】：