獲取一個元素中的所有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-/。或者，您可能會遍歷所有可能的屬性列表，並查看元素具有哪些屬性，但這可能不是最佳選擇。