jquery Validierung für Eingaben mit bestimmten Klasse

Question

Ich benutze jquery Validator. Ich muss Validierungsregeln und -nachrichten für Eingabefelder mit bestimmter Klasse hinzufügen.

Felder:

'director_front_passport[]','director_back_passport[]','director_address_document[]' sind Arrays und ich habe eine versteckte div mit den gleichen Feldnamen, aber ich brauche nur diese Felder erforderlich machen, dass director_documents Klasse.

Ich meine, ich habe zwei divs mit den gleichen Eingabefeldern - das sind Arrays, aber ich brauche nur diese Eingabefelder mit der Klasse director_documents. Wie geht das?

Mein Code ist:

var images = ['director_front_passport[]','director_back_passport[]','director_address_document[]','corporate_document[]']; 
 
var extn ="jpeg|jpg|gif|png|pdf"; 
 
for(var i=0;i< images.length;i++) { 
 
    var $inputImage; 
 
    $inputImage = images[i]; 
 
    rules[$inputImage] = {}; 
 
    rules[$inputImage].required = true; 
 
    rules[$inputImage].extension = extn; 
 

 
    msgs[$inputImage] = 'Please provide an image with one of the following extensions : jpg, gif, png or pdf'; 
 

 
} 
 
var validateObj   = {} 
 
validateObj["rules"]  = rules; 
 
validateObj["messages"] = msgs; 
 
validateObj["onkeyup"] = function(element) { $(element).valid();}; 
 
validateObj["errorPlacement"] = function(error, element) { 
 
    if($(element).hasClass('app-file')) { 
 
    error.insertAfter($(element).next().next()); 
 
    } 
 
    
 

 
}; 
 
validateObj["success"] = function(element) {}; 
 
validateObj["submitHandler"] = function (form) { 
 
    form.submit(); 
 
} 
 
$("#form").validate(validateObj);

<div class="director-uploads" id="director-uploads1"> 
 
    <div class="form-group"> 
 
    <label for="director_front_passport" class="col-md-2 director-label-file">{{translate("Front ID/Passport")}}</label> 
 
    <div class="col-md-8 file-wrapper"> 
 
     {{ Form::file('director_front_passport[]', ["class"=>"app-file director_documents"]) }} 
 
     <label for="director_front_passport" class="file-upload"><span>{{translate("Upload a File")}}</span></label> 
 
     <div class="file-name"></div> 
 
     <label for="director_front_passport" generated="true" class="<?php echo $errors->has('director_front_passport') ? 'error' : '';?>">{{ $errors->first('director_front_passport') }}</label> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="director_back_passport" class="col-md-2 director-label-file">{{translate("Back ID/Passport")}}</label> 
 
    <div class="col-md-8 file-wrapper"> 
 
     {{ Form::file('director_back_passport[]', ["class"=>"app-file director_documents"]) }} 
 
     <label for="director_back_passport" class="file-upload"><span>{{translate("Upload a File")}}</span></label> 
 
     <div class="file-name"></div> 
 
     <label for="director_back_passport" generated="true" class="<?php echo $errors->has('director_back_passport') ? 'error' : '';?>">{{ $errors->first('director_back_passport') }}</label> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

Haben Sie HTML5 Validierer mit in Betracht gezogen? Sie können einen Regex verwenden, um nach Ihren Bild-Erweiterungen zu suchen (ähnlich wie die E-Mail unten validiert wird). http://www.the-art-of-web.com/html/html5-form-validation/

Um die Validierungsnachricht ändern Sie oninvalid verwenden können:

<input type="text" id="username" required placeholder="Enter Name" 
    oninvalid="this.setCustomValidity('Enter User Name Here')" 
    oninput="setCustomValidity('')" /> 

Website: <input type="url" name="website" required pattern="https?://.+"> 
Email Address: <input type="email" name="email" required placeholder="Enter a valid email address"> 

Answer 2

fand ich eine Lösung:

for(var i=0;i< images.length;i++) { 
 
    var $inputImage; 
 
    $inputImage = images[i]; 
 
    if($('input[name="' + $inputImage + '"]').hasClass('director_documents')) { 
 
    rules[$inputImage] = {}; console.log(1); 
 
    rules[$inputImage].required = true; 
 
    rules[$inputImage].extension = extn; 
 

 
    msgs[$inputImage] = 'Please provide an image with one of the following extensions : jpg, gif, png or pdf'; 
 
    } 
 

 
}