Question

I have an issue in image validation using jQuery Or JavaScript.

Please see code below when I tried myself.

Briefing

I want to validate multiple images with the help of for loop.

Issue (Validate Ordering)

When I press submit button this code has validate images in DESC order (see image below) and I want ASC order like 1 field is required... and then 2 field is required etc

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function imageValidation(){
    return_var = 'true';

    for(var i=1; i<4; i++){
        if(($('#player-'+i).val()) == ''){
            return_var = i+' field is required';
        }
    }
    alert(return_var);
    return false;

}   
</script>

<form onsubmit="return imageValidation()">
1 <input type="file" id="player-1" name="players[]" /><br />
2 <input type="file" id="player-2" name="players[]" /><br />
3 <input type="file" id="player-3" name="players[]" /><br />
<input type="submit" />
</form>

image

Answer 1

i have added a new line of code, just break; when first condition match. it will resolve your problem

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function imageValidation(){
    return_var = 'true';

    for(var i=1; i<4; i++){
        if(($('#player-'+i).val()) == ''){
            return_var = i+' field is required';
            break;// break immediately rather wait to complete the loop.
        }
    }
    alert(return_var);
    return false;

}   
</script>

<form onsubmit="return imageValidation()">
1 <input type="file" id="player-1" name="players[]" /><br />
2 <input type="file" id="player-2" name="players[]" /><br />
3 <input type="file" id="player-3" name="players[]" /><br />
<input type="submit" />
</form>