动态创建的表单无法通过验证脚本识别

Question

获取表单验证有些麻烦。我有一部分地址栏需要填写。有一个选项可以添加额外的地址信息。但是，地址字段出现并单击提交按钮后，如果添加的字段为空，则不会进行验证。有人可以在这里帮助我解决问题。我也在下面提供了一些代码。

我不知道是否是因为正在使用javascript添加的形式。

这里是我的javascript：

//validate form 

var fields = [ 
    { 
     selector: $('.not-empty'), 
     validations: [ isNotEmpty] 
    }, 
    { 
     selector: $('.email'), 
     validations: [ isNotEmpty, isEmail] 
    }, 
    { 
     selector: $('.number'), 
     validations: [ isNotEmpty, isNumber] 
    }, 
    { 
     selector: $('.number-noreq'), 
     validations: [isNumber] 
    } 
]; 
$(document.ready(function(){ 
    $('#job-application-form').on('click', 'button[type=submit]', function(e) { 
     e.preventDefault(); 
     validate(); 
    }); 

    $('#add_address').on('click', function(e){ 
     e.preventDefault(); 
     $('.address-form').clone().removeClass('address-form').insertAfter('.address-form'); 
    }); 
}); 
function validate(){ 
    $('.form-control').closest('.form-group').removeClass('has-error'); 
    var i = 0, k = 0, z = 0, j = fields.length, item, selector, fn, info; 
    for(; i < j; i++){ 
     item = fields[i]; 
     for(k = 0; k < item.validations.length; k++){ 
      fn = item.validations[k]; 
      for(z = 0; z < item.selector.length; z++){ 
       selector = $(item.selector[z]); 
       info = selector.closest('.form-group'); 
       if(info) 
        info[fn(selector.val()) ? 'removeClass' : 'addClass']('has-error'); 
      } 
     } 
    } 
} 


//validation functions 
function isNotEmpty(value){ 
    return value && $.trim(value).length > 0; 
} 
function isEmail(value){ 
    return /^([^@\s\t\n]+\@[\w\d]+\.[\w]{2,3}(\.[\w]{2})?)$/.test(value); 
} 

function isNumber(value){ 
    return /^\d+$/.test(value); 
} 

这里是形式

<span id='address_records' class='app-section'> 
       <span class='address-form'> 
        <div class='row'> 
         <div class='col-md-4'> 
          <div class='form-group'> 
           <label>Current Address</label> 
           <input type='text' class='form-control not-empty' name='address[]'> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='col-md-4'> 
          <div class='form-group'> 
           <input type='text' class='form-control' name='address2[]'> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='col-md-2'> 
          <div class='form-group'> 
           <label>City</label> 
           <input type='text' class='form-control not-empty' name='city[]'> 
          </div> 
         </div> 
         <div class='col-md-2 col-md-offset-1'> 
          <div class='form-group'> 
           <label>State</label> 
           <select class='form-control not-empty' name='state[]'> 
            <? include 'inc/state_list_options.php';?> 
           </select> 
          </div> 
         </div> 
         <div class='col-md-2 col-md-offset-1'> 
          <div class='form-group'> 
           <label>Zip</label> 
           <input type='text' class='form-control not-empty' name='zip[]' maxlength='5'> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='col-md-2'> 
          <div class='form-group'> 
           <label>From</label> 
           <div class='input-group'> 
            <input type='text' class='form-control half-input not-empty' name='addr_from_month[]'> 
            <input type='text' class='form-control half-input not-empty' name='addr_from_year[]'> 
           </div> 
          </div> 
         </div> 
         <div class='col-md-2 col-md-offset-1'> 
          <div class='form-group'> 
           <label>To</label> 
           <div class='input-group'> 
            <input type='text' class='form-control half-input not-empty' name='addr_to_month[]'> 
            <input type='text' class='form-control half-input not-empty' name='addr_to_year[]'> 
           </div> 
          </div> 
         </div> 
        </div> 
       </span> 
       <div class='row'> 
        <div class='col-md-12'> 
         <div class='form-group'> 
          <a href="" id="add_address">Add Another Address</a> 
         </div> 
        </div> 
       </div> 
      </span> 

Answer 1

我（想），你需要这些改变的元素的范围内使用。对（）。我没有看到你的示例代码实际提交按钮，这仅仅是一个例子

$('#address_records').on('click','button[type=submit]',function(e) { 
    e.preventDefault(); 
    validate(); 
}); 

另外，你需要移动VAR栏= []声明的validate（）函数中。目前，您正在定义字段以在页面加载时包含与选择器匹配的DOM元素。克隆的元素在那时不存在。但是，当验证函数运行时，它们确实存在，因此您想在此时使用选择器，然后对所有发现的元素运行验证。

Answer 2

我认为表单验证，不需要jQuery的。您使用HTML5和Bootstrap3的原因。 下面是一个使用HTML5结构表单验证：

<input type="text" class="" placeholder="" required="required" /> /* Only Text */ 
<input type="email" class="" placeholder="" required="required" /> /* Only email */ 
<input type="text" class="" placeholder="Zip Code" required="required" pattern="[0-9]{5}" /> /* Only Zip code US */ 
<input type="text" class="" placeholder="Telephone" required="required" pattern="[0-9]{11}" /> /* Only Telephone */ 
type="button" 
type="checkbox" 
type="color" 
type="date" 
type="datetime" 
type="datetime-local" 
type="file" 
type="hidden" 
type="image" 
type="month" 
type="number" 
type="password" 
type="radio" 
type="reset" 
type="search" 
type="submit" 
type="tel" 
type="time" 
type="url" 
type="week" 
      required="required" 
      readonly="readonly"