Trigger Validierung nur auf einem Div oder auf einem Feld

Question

Ich habe eine lange form, die in Abschnitte unterteilt ist, und ich möchte Validierung über JavaScript nur für einen bestimmten Abschnitt auslösen. Entweder würde ich den div spezifizieren, der eine Menge von erforderlichen Eingaben enthält, um zu validieren, oder wenn das nicht möglich ist, dann werde ich eine Reihe bekannter Eingaben durchlaufen und validiere jede der Reihe nach. Ich verwende Bootstrap v3 Validierung.

Irgendwelche Ideen, wie man das macht?

Answer 1

können Sie verwenden, um dies

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

ich folgendes in Ermangelung einer Bootstrap Validierung Lösung implementiert haben:

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