Hiding a multi step form

Question

I am designing a multi step form where I hide a set of fields when a user click on a Next button to fill out another set of fields. I have the below code:

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

I am testing this with $("#test_field").hide(); but when I submit I get this error An invalid form control with name='test_field' is not focusable.. What other ways can I use?

Your jQuery selector, `$("#test_field")`, is looking for an element with `id="test_field"`, which you do not have. You also are not using or including the jQuery Validate plugin anyplace as per your code above. You've commented out the plugin and are not using the `.validate()` method. — Sparky, Jan 13 '15 at 18:19
Your title has nothing to do with your question/code. Edited. — Sparky, Jan 13 '15 at 18:20
I un-commented out the script tag and the validation is working now. But for fields that would be hidden, it is not validating them. — mpora, Jan 13 '15 at 18:50
Something is still wrong with what you're showing us. You cannot be using the jQuery Validate plugin without the `.validate()` method. It does not validate hidden fields by default. You have to set the `ignore` option to `[]` to validate hidden fields. — Sparky, Jan 13 '15 at 18:54
Adding `$("#myForm").validate({ignore: [],});` fixed the issue. I have now to figure out showing a summary of errors. Thanks @Sparky — mpora, Jan 13 '15 at 20:00

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

You are hiding a required input, which is causing the error you posted. See this related question.

Why you are hiding something that is required? Maybe you shouldn't do that?

You can try to do a few hacky things like:

Changing the opacity of the input to 0 instead of hiding it
- input.style.opacity = .5;
Placing an absolutely positioned div white a white background above the input

Check for IE specifics on that first one

edited May 23 '17 at 11:57

Community

1
1

answered Jan 13 '15 at 18:59

Marty Cortez

2,325
1
17
22

1

The OP wants to validate hidden fields because he is doing a multi-step form where a certain section of the form is active and another is hidden. He simply needs to set the `ignore` option to `[]` in order to validate anything that's hidden. See: http://stackoverflow.com/a/8565769/594235 – Sparky Jan 13 '15 at 19:06

Hiding a multi step form

1 Answers1