觸發驗證只在一個div或一個字段上

Question

我有一個很長的form它被分成幾個部分，我想通過JavaScript觸發驗證只爲特定部分。我想指定div包含一組需要的輸入來驗證，或者如果這是不可能的，那麼循環遍歷一組已知輸入並依次驗證每個輸入。我正在使用Bootstrap v3驗證。

有關如何做到這一點的任何想法？

Answer 1

您可以使用此

<?php echo form_open("placead/addCredentials",array("name"=>'form1',"id"=>'formElement','content')); ?> 
<div class="halfForm"> 
      <label>First Name</label> <input type="text" name="fname" id="fname" class="formtextBox" value="<?php echo set_value('fname'); ?>"> 
      <span><?php echo form_error('fname'); ?></span> 
      </div><!--halfForm--> 

var errors = false; 
$("#formElement").on("submit",function(e) { 
$('#formElement .my input, #formElement .my select').each(
      function(index){ 
       var input = $(this); 

        if((input.attr('type')=='text'|| input.attr('type')=='password') && input.attr('name')!='website'){ 
         if(input.val()==''){ 
         $(this).parent('.halfForm').find('label').addClass('error'); 
         input.focus(); 
         errors = true; 
         return false; 
         } 
         else{ 
         $(this).parent('.halfForm').find('label').removeClass('error'); 
         errors = false; 
         } 
        } 

        if(input.attr('type')=='email'){ 
         if(!ValidateEmail(input.val())){ 
          $(this).parent('.halfForm').find('label').addClass('error'); 
          input.focus(); 
          errors = true; 
         return false; 

         }else{ 
          $(this).parent('.halfForm').find('label').removeClass('error'); 
         errors = false; 
         } 
        } 

        if(input.attr('type')=='tel'){ 
         if(input.val()==''){ 
          $(this).parent('.halfForm').find('label').addClass('error'); 
          input.focus(); 
          errors = true; 
          return false; 
         }else{ 
          $(this).parent('.halfForm').find('label').removeClass('error'); 
         errors = false; 
         } 
        } 
      }); 
if(errors){ 
     e.preventDefault(); 
     return false; 
     } 
}); 

function ValidateEmail(mail) 
{ 
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) 
    { 
    return (true) 
    } 
    return (false) 
} 

Answer 2

我實現了在沒有引導驗證解決方案的以下內容：

function ValidateAllRequiredFieldsInDiv(divName) { 
    var valid = true; 

    var required = $('#' + divName + " :input").filter('[required]'); 
    required.each(function (index, obj) { 
     var control = $(this); 
     if (IsControlValid(control)) { 
      control.removeClass('invalid'); 
     } else { 
      control.addClass('invalid'); 
      valid = false; 
     } 
    }); 

    return valid; 
} 

function IsControlValid(control) { 
    var value = control.val(); 
    if (control.is('input') || control.is('textarea')) { 
     return value != null && value != ''; 
    } else if (control.is('select')) { 
     return value != null && value != '' && value > 0; 
    } else { 
     return true; 
    } 
}