divまたはフィールド上でのみトリガーの検証

Question

私は長い部分がformで、セクションに分割されており、特定のセクションについてのみJavaScriptを介して検証をトリガーしたいと考えています。検証するために必要な入力のセットを含むdivを指定するか、それが不可能な場合は、既知の入力のセットをループし、それぞれを順番に検証します。私はブートストラップv3検証を使用しています。

これを行う方法に関するアイデアはありますか？あなたはこの

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

私は、ブートストラップ検証ソリューションが存在しない場合に次のように実装しました：

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

Answer 2

を使用することができます