使用javascript提交时必需的属性不起作用答案

【问题标题】：Required attribute not working using javascript submit使用javascript提交时必需的属性不起作用
【发布时间】：2017-02-15 06:42:49
【问题描述】：

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

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

    );
}

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

【问题讨论】：

您在哪个浏览器/操作系统上遇到此问题。也请关闭输入标签并为您的表单命名。
谷歌浏览器，Windows 10
我不知道在哪里给我的表单命名
人工提交不会触发 HTML5 所需的东西，这意味着您的表单将提交。无论如何都要检查后端，它更安全。
使用JS表单validate函数

标签： javascript php codeigniter

【解决方案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()上使用的目标。

希望对你有帮助！

【讨论】：

您阅读了我的回答，但只了解您想要的。我说他需要表单内的提交按钮来触发 REQUIRED 输入验证。这次请谅解。
@RohitAilani 如果您可以查看我编辑的答案，我这次给了他一个更好的答案。我看到您通过添加“type =“text/javascript””编辑了一个人的答案......你在这个地球上是一种解脱。请理解他的问题不是提交表单，而是验证输入。
我了解所有内容，按照惯例，脚本标签应该具有类型，您能否验证没有“type="text/javascript"”的脚本标签。关于您的回答，您可以更好地解释它，
@RohitAilani 我对这个主题的最后评论：我确认“它将触发所需的属性”。你说“你还说没有可以触发提交的jquery方法吗”我没有看到相关性，祝你有美好的一天。

【解决方案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>

【讨论】：

这个脚本对我来说是最简单的。我认为关键是按钮的不同 id 和 type="submit" 就像 Răducanu Ionuţ 所说的那样。顺便说一句，我不使用 onclick="return" 仍然可以工作。

【解决方案3】：

我已经通过在 Script 标签中添加 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>

【讨论】：

【解决方案4】：

使用 javascript 的 form.submit() 函数将导致绕过输入验证（根据 point 4 of the form submission algorithm 中的 HTML 规范）。触发 HTML 输入验证的唯一方法是在表单内的提交按钮上使用单击事件，可以由用户实际单击，也可以在 javascript 中使用 form.querySelector('input[type="submit"]').click() 之类的东西。

【讨论】：