获取一个元素中的所有数据-*属性，并将它们放入数组中。

Question

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

1字段集=1页

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

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

我如何循环所有输入？关键是验证当用户单击next (对于下一页)时，但仍然将所有内容保存在一个表单中。

有人有主意吗？

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

单击"next“时，您已经得到当前字段集，只需获取所有子输入并验证它们。基本例子：

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;
    }

见http://jsfiddle.net/n55h4o7f/1/。

Answer 3

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

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

然后，您可以获得所有表单控件(输入、选择、文本区域等)。在字段集中使用它的集合

var controls = fieldset.elements;

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

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

要获取表单中的所有控件，可以使用表单的集合。

要获取元素的所有数据属性，可以使用属性。

element.dataset

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