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

Question

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

1字段集= 1页

这些字段集在端部将是动态的，从数据库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-/。或者，您可能会遍历所有可能的属性列表，并查看元素具有哪些属性，但这可能不是最佳选择。