Question

我在不同的按钮

中制作了一些不同的动作

<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，您可以创建自己的函数来实现我刚用于（）的目标。

我希望它有所帮助！

Answer 2

请尝试以下代码。我希望能解决你的问题。

<html>
  <head>
        <title>Submit</title>
        <script type="text/javascript" language="javascript">
                function submitForm(action)
                {
                    document.getElementById('form').action = action;
                    document.getElementById('form').submit(

                    );
                    //alert(document.getElementById('form').action);
                }
        </script>
  </head>
  <body>
        <form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
            <input name="name" class="form-control" type="text" required="required">
            <button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
            <button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
        </form>
  </body>
</html>

Answer 3

我通过在脚本标记中添加Javascript部分来测试您的代码它运行正常。我在Chrome Windows 10上测试过它。

       <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>
       <script>
         function submitForm(action) {
              document.getElementById('form').action = action;
              document.getElementById('form').submit();
         }
      </script>

Answer 4

使用javascript＆＃39; flex: 1函数将导致绕过输入验证（根据point 4 of the form submission algorithm中的HTML规范）。触发HTML输入验证的唯一方法是在表单内的提交按钮上使用click事件，可以是用户实际点击，也可以是javascript中的form.submit()。

使用javascript提交无效的必需属性

4 个答案: