Question

我有一个表单，它使用可以看作页面的字段集。

1 fieldset = 1 page

最后的这些字段集将是动态的，来自数据库etcetc。我需要找到一种方法来从字段集中的输入中获取所有data- *属性。对于验证规则。因为这些也是动态的。取决于客户的需求。

<form id="msform">
        <!-- progressbar -->

        <!-- fieldsets foreach every group -->
        <fieldset>

            <h2 class="fs-title">Create your account</h2>
            <h3 class="fs-subtitle">This is step 1</h3>
            <!-- foreach every input that belongs to the group -->
            <input type="text" name="email" placeholder="Email" data-email="true" data-required="true" />
            <input type="password" name="pass" placeholder="Password" id="pass" data-required="true" />
            <input type="password" name="cpass" placeholder="Confirm Password" data-required="true" data-equalto="#pass" />
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Social Profiles</h2>
            <h3 class="fs-subtitle">Your presence on the social network</h3>
            <input type="text" name="twitter" placeholder="Twitter" />
            <input type="text" name="facebook" placeholder="Facebook" />
            <input type="text" name="gplus" placeholder="Google Plus" />
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" />

        </fieldset>
        <fieldset>
            <h2 class="fs-title">Personal Details</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Terms Of Service</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
    </form>

如何循环浏览所有输入？关键是验证用户何时点击下一页（下一页），但仍保留一个表格中的所有内容。

有人有想法吗？

http://jsfiddle.net/n55h4o7f/

Answer 1

根据您的要求和html，看起来所有规则都以data-*为前缀，因此您可以使用数据api

$('#msfieldset form').find(':input').each(function() {
  var data = $(this).data();
  console.log('element', this.name);
  console.log(data, data)
  $.each(data, function(key, value) {
    console.log(key, value)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="msform">
  <!-- progressbar -->

  <!-- fieldsets foreach every group -->
  <fieldset>

    <h2 class="fs-title">Create your account</h2>
    <h3 class="fs-subtitle">This is step 1</h3>
    <!-- foreach every input that belongs to the group -->
    <input type="text" name="email" placeholder="Email" data-email="true" data-required="true" />
    <input type="password" name="pass" placeholder="Password" id="pass" data-required="true" />
    <input type="password" name="cpass" placeholder="Confirm Password" data-required="true" data-equalto="#pass" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Social Profiles</h2>
    <h3 class="fs-subtitle">Your presence on the social network</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />

  </fieldset>
  <fieldset>
    <h2 class="fs-title">Personal Details</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Terms Of Service</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</form>

Answer 2

单击“下一步”时，您已获取当前字段集，只需获取所有子项输入并验证它们。基本示例：

error = false;
    inputs = current_fs.children('input');
    inputs.each(function() {
        if ($(this).val() == '') {
            alert($(this).attr('name') + ' may not be empty.');
            error = true;
        }
    });
    if(error) {
        animating = false;
        return false;
    }

请参阅 DEMO 。

Answer 3

您可以使用以下方式获取特定页面的字段集：

var fieldset = document.querySelectorAll('#formId fieldset')[pageNumber];

然后，您可以使用elements collection获取字段集中的所有表单控件（输入，选择，文本等）：

var controls = fieldset.elements;

然后，您可以遍历控件集合并使用类或数据 - 属性来确定验证类型，例如：对于必需的文本输入，必须是整数：

<input name="foo" class="fv-required fv-int">

要获取表单中的所有控件，您可以使用表单elements collection。

要获取元素的所有数据 - 属性，您可以使用dataset property：

element.dataset

对于旧版浏览器，在自己的属性上使用for..in循环，并获取名称与/^data-/匹配的浏览器。或者，您可以循环遍历所有可能的数据 - 属性的列表，并查看该元素具有哪些属性，但这可能不是最佳的。

在一个元素中获取所有data- *属性，并将它们放在一个数组中

3 个答案: