0

Cordial Saludo,

Espero me puedan ayudar, lo que deseo hacer es poner obligatorio un input de tipo "file".

<form method="POST"  id="frm_contact" name="frm_contact" enctype="multipart/form-data">
    <input type="file" id="1" name="1" class="form-control-file">
     <input type="submit" class="btn btn-primary" id="enviardoc" value="Enviar Documentos">
</form>

Ya que lo capturo y lo envío mediante AJAX, Pero deseo que sea obligatorio.

<script type="text/javascript">
   $(function(){
                      $("#frm_contact").on("submit", function(e){
                          e.preventDefault();
                          var f = $(this);
                          var formData = new FormData(document.getElementById("frm_contact"));

                          $.ajax({
                              url: "DocumentosApro.php",
                              type: "POST",
                              dataType: "html",
                              data: formData,datos,
                              cache: false,
                              contentType: false,
                              processData: false
                          })
                              .done(function(res){
                                  alert(res);
                                  location.reload();

                              });
                      });

                    }); 
</script>

Cabe resaltar que el archivo se envia bien, este o no cargado un archivo, el hace la funcion, pero quiero que sea obligatorio..

Gracias

1
  • 1
    ¿Has probado añadiéndole un required al input? Los type="file" los aceptan también: <input type="file" id="1" name="1" class="form-control-file" required>
    – phpMyGuel
    Commented el 16 nov. 2018 a las 15:04

2 respuestas 2

2

Te dejo un ejemplo funcional, es cierto que puedes agregar el atributo de HTML required, pero si quieres un poco más de seguridad puedes validar desde Javascript, intenta esto.

$(function() {
  $("#frm_contact").on("submit", function(e) {
    e.preventDefault();
    
    /*Con el id del input tipo file le indicas que lea la longitud o cantidad de 
      archivos que se seleccionaron*/
    var vidFileLength = $("#uploadFile")[0].files.length;

    /*Aquí validas si no han seleccionado archivos mandas una alerta y se detiene el 
     script*/
    if (vidFileLength === 0) {
      alert("No hay archivos, para enviar.");
     return false;
    }
    var f = $(this);
    var formData = new FormData(document.getElementById("frm_contact"));

    $.ajax({
        url: "DocumentosApro.php",
        type: "POST",
        dataType: "html",
        data: formData,
        datos,
        cache: false,
        contentType: false,
        processData: false
      })
      .done(function(res) {
        alert(res);
        location.reload();

      });
  });

});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<form method="POST" id="frm_contact" name="frm_contact" enctype="multipart/form-data">
  <input id="uploadFile" name="uploadFile" type="file" id="1" name="1" class="form-control-file">
  <input type="submit" class="btn btn-primary" id="enviardoc" value="Enviar Documentos">
</form>

De igual forma siempre es importante realizar la validación desde el lado del servidor. Saludos.

1
0

Te comparto un pequeño fragmento de HTML para que vea como aplicar lo que comentas, pero antes un poco de teoría:

  • Para lograr lo que necesitas, el atributo requerido es un atributo booleano que resuelve tu problema. Cuando este presente, especifica que se debe completar un campo de entrada antes de enviar el formulario.
    Considera lo siguiente: Funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.

Al a la etiqueta del input, le agregas el atributo required que describí anteriormente.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>


</body>
</html>

Además, es recomendado que las validaciones las realices en tu JS o JQuery por seguridad, te comparto un ejemplo de su aplicación:

function Jq(){
  console.log();
    if ($('#txtrut').val() == "") {
        alert('¡Vacío!');
        return false;
    }else{
      alert('¡Completo!');
      
    }
};

function Js(){
 valor = document.getElementById("txtrut1").value;
 if( valor != "" ) {
  alert('¡Completo!');
 }else{
   alert('¡Vacío!');
 }
}
<!-- Validación con Libreria JQuery --> 
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<label>Validación con JQuery</label>
<br>
<input type="text" id="txtrut" >
<button onclick="Jq();">Validate</button>

<!-- Validacion con javascript -->
<br>
<label>Validación con Javascript</label>
<br>
<input type="text" id="txtrut1" >
<button onclick="Js();">Validate</button>

Espero os ayude,

Suerte...

1
  • Las publicaciones que son básicamente código se consideran de baja calidad. Deberías añadir algo más de información: ¿qué hace el código compartido? ¿qué diferencia hay con el código de la pregunta? ¿por qué resolvería el problema? Lee Cómo responder y completa el recorrido de bienvenida para más información.
    – Alvaro Montoro
    Commented el 16 nov. 2018 a las 15:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.