javascript - 必需的属性不能使用 javascript 提交

Question

我在不同的按钮中做了一些不同的 Action

<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
    <input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>

Javascript

function submitForm(action)
{
    document.getElementById('form').action = action;
    document.getElementById('form').submit(

    );
}

然后，我的必需属性不起作用。我做错什么了吗？让我知道是否有其他解决方案。谢谢，

Answer 1

我无法给你很好的解释，但你需要表单内的提交按钮。

所以如果你有一个像这样的按钮: <input type="submit" value="Submit"> ,它将触发所需的属性。

@Remn 如果您仍保留在函数内部提交的结构上，您可以触发自己的验证，例如:

if ($("form")[0].checkValidity())
{
   $("form").submit()
}

然后通过传递每个必需的元素(输入在代码中设置)来处理无效的输入:

$('form :input[required="required"]').each(function()
      {
        if(!this.validity.valid)
        {
            $(this).focus();
            // break
            return false;
        }
    });

在下面的例子中，无效的输入将被一个一个地聚焦。

整个代码是:

$( function () {
    $("body").on("click", "#trigger", function() {

    if ($("form")[0].checkValidity())
    {
        $("form").submit()
    }

      $('form :input[required="required"]').each(function()
      {
        if(!this.validity.valid)
        {
            $(this).focus();
            // break
            return false;
        }
    });
  });
});

#trigger 是我在要提交的按钮上设置的 id，您可以创建自己的函数来实现我刚刚使用的 on() 的目标。

希望对您有所帮助!