Question

我正在设计一个多步骤表单，当用户单击“下一步”按钮以填充另一组字段时，我会隐藏一组字段。我有以下代码：

<!DOCTYPE html><meta charset="UTF-8">
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <form action="#" method="get">
        <div id="test"></div>
        <input type="email" title="" pattern="[^ @]*@[^ @]*" placeholder="Enter your email" required />
        <input type="text" name="prosper" id="test_field" required />
        <input type="button" id="add" value="Add New Line" />
        <input type="submit" value ="Submit"/>
    </form>

    <script src="jquery.js"></script>
  <script src="Scripts/jquery.validate.min.js"></script>
     <!-- <script src="Scripts/jquery.validate.unobtrusive.js"></script>-->

    <script type="text/javascript">
        jQuery(function () {

            $("#test_field").hide();

            $("#add").click(function () {
                var id = new Date().getTime();
                var common_fields = "<div style='background-color:#f0f0f0' class='move_line'><div id='we'></div><input type='hidden' value=''>" + 
                    "<a href='#' class='new_user'>Add User</a><br /><br />Common field 1: <input required type='text' id='" + id + "'/>&nbsp;<br /><br /><a href='#' class='remove'>Remove</a><hr></div>";
                $("#test").append(common_fields);
            });

            $("body").on("click", ".new_user", function () {
                $(this).closest("div.move_line").find("div#we").append("Name: <input required type='text' />&nbsp;Phone: <input type='text' /><br /><br />");
            });

            $("body").on("click", ".remove", function () {
                $(this).closest("div.move_line").remove();
            });



        });
    </script>
</body>
</html>

我正在使用$("#test_field").hide();对此进行测试，但是当我提交时，我收到此错误An invalid form control with name='test_field' is not focusable.。我还可以使用其他什么方式？

Answer 1

您正在隐藏required输入，这会导致您发布的错误。请参阅此related question。

为什么你隐藏了必需的东西？也许你不应该这样做？

你可以尝试做一些像hacky这样的事情：

将输入的opacity更改为0而不是隐藏
- input.style.opacity = .5;
将绝对定位的div白色放在输入

检查第一个上的IE细节

隐藏多步骤表单

1 个答案: