Javascript input check

Question

I am making a form with sending 2 types of photo, and I would like to know how to do a javascript check to see if the person sent any of the 2 options, and if you have not sent any of the 2 does not proceed to next page...

	<div class="fileUpload btn">
	<div>

		<span style="width:250px">
		<img src="images/enviar1.png" width="235" height=""/></span></div>
       
	    <input type="file" name="img1"  id="img1" accept="image/*" capture="camera" onchange="" class="upload" />
                </div>
                	<div class="fileUpload btn" >
        	<div>
        		<span style="width:250px">
        	<img src="images/enviar2.png" width="235" height=""/></span></div>

	    <input type="file" name="img2"  id="img2" accept="image/*" capture="camera" onchange="" class="upload" />

    
</div>

<input style="margin-left:25px;" type="submit" name="botao" id="botao" value="CONTINUAR"/>

Answer 1

It is possible to use the function submit of our jquery friend, when sending the form , a check is made on function call.

What was done in the code below, was to check if at least one image was selected in one of the two inputs, if it exists it continues and sends the form, otherwise closes the application and shows an alert.

// Executa ao enviar o formulário, <form>
$('form').submit(function(){
// Verifica se não foi selecionado nada nos dois inputs
if($('#img1').val() === "" && $('#img2').val() === ""){
  alert('selecione uma imagem');
return false
}

alert('enviado');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<div class="fileUpload btn">
	<div>
    <span style="width:250px">
		<img src="images/enviar1.png" width="235" height=""/></span>     </div>
  <input type="file" name="img1"  id="img1" accept="image/*" capture="camera" onchange="" class="upload" />
</div>
<div class="fileUpload btn" >
  <div>
    <span style="width:250px">
    <img src="images/enviar2.png" width="235" height=""/></span>
  </div>
  <input type="file" name="img2"  id="img2" accept="image/*" capture="camera" onchange="" class="upload" />
</div>
<input style="margin-left:25px;" type="submit" name="botao" id="botao" value="CONTINUAR"/>
</form>

---

Reference: Submit - Jquery

Answer 2

use the plugin jquery validation

it is a complete validation library for forms, very good and simple to install and use.

$(seletorDoFormulario).valid()

this example above will return you a boolean thus facilitating life to know if the form is valid to be sent.

Answer 3

In your case, as you only need to know if he sent at least one of the two, the attribute required HTML in the first input would not be enough?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<div class="fileUpload btn">
    <div>
    <span style="width:250px">
        <img src="images/enviar1.png" width="235" height=""/></span>     </div>
  <input type="file" name="img1"  id="img1" accept="image/*" capture="camera" onchange="" class="upload" required />
</div>
<div class="fileUpload btn" >
  <div>
    <span style="width:250px">
    <img src="images/enviar2.png" width="235" height=""/></span>
  </div>
  <input type="file" name="img2"  id="img2" accept="image/*" capture="camera" onchange="" class="upload" />
</div>
<input style="margin-left:25px;" type="submit" name="botao" id="botao" value="CONTINUAR"/>
</form>