代码之家 › 专栏 › 技术社区 › colt.exe

通过submit事件中的if语句阻止提交

jquery javascript

colt.exe · 技术社区 · 4 年前

$('.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){}) 。通常人们会遵循以下步骤:

点击按钮调用验证功能。
验证表单并转发提交功能(如果有效)。
如果表格填写不正确,请警告用户。

我想做的是:

呼叫 提交(函数(事件){}) .
在if块内检查验证。
如果表单已验证,请继续。
如果表单未通过验证,则中断 提交(函数(事件){}) .

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

0 回复 | 直到 4 年前

El_Vanja 4 年前

你的状况是你的罪魁祸首:

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

问题是 this 表示表单元素。您试图访问表单上的属性,但表单没有这些属性,它有输入你需要,正是它们具有这些属性。因此,您需要专门获取这些输入并获取它们的值:

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

并且它应该按预期运行。

colt.exe 4 年前

以下代码块按预期工作。它以数组的形式收集表单数据,每个字段和值都可以访问。

<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>