자바 스크립트를 사용하여 업로드 창 차단 팝업

Question

입력 값 만 입력하면 사용자가 파일을 업로드 할 수 있습니다. 버튼을 클릭하자마자 파일 업로드 창이 열립니다. 원하지 않습니다. 사용자가 아래 명시된 입력 파일에 값을 입력하지 않으면 팝업됩니다. 이러한 입력은 다음과 같습니다

<input type="text" id="id" placeholder="Enter Audit ID" autocomplete="off"> 
<input type="text" id="email_id_upload" placeholder="Enter Email_id " autocomplete="off"> 

이 업 로더입니다 :

<form> 
    <input type="file" name="file" id="file"><br> 
    <input type="button" name="submit_file" value="Submit"> 
</form> 

그리고이 사용자가 입력하는 모든 값이있는 경우 JS 확인하는 것입니다

$('#file').click(function(){ 

     var email_id_upload= $('#email_id_upload').val(); 
     var id = $('#id').val(); 
     if(email_id_upload.length !==0 && id.lenght !==0) 
     { 
     //allow upload window to pop up 

     } 
     else 
      { 
       if(email_id_upload.length ===0 && id.length ===0) 
       {$('#message_content2_1').html("<span style='color:red'>Please fill email id and audit id</span>");} 
       else{ 
       if(email_id_upload.length ===0) 
       {$('#message_content2_1').html("<span style='color:red'>Please fill email id</span>");} 
       if(id.length ===0) 
       {$('#message_content2_1').html("<span style='color:red'>Please fill email id and audit id</span>");} 
       } 
      } 
    }); 

Answer 1

당신이 게시 한 방법을 귀하의 JS, 실제로 나를 위해 작동합니다. if 조건에 오타가 하나 있습니다 (id.lenght). 일반적으로 클릭 이벤트에 바인딩하는 것은 좋지 않습니다. 누군가가 클릭 이벤트를 트리거 할 수도 있기 때문입니다. 양식 필드 내에서 Enter 키를 눌러 제출 이벤트.

예에서 두 필드가 모두 비어 있고 누군가 #file 요소를 클릭하면 else 블록이 실행되고 click 이벤트는 #file 요소의 컨테이너로 바운드됩니다. 이벤트 버블 링을 중지하려면 else 블록 끝에서 false를 리턴하십시오.

Answer 2

저는 올바른 스크립트를 수정합니다. 그것이 일할 것이라고 생각하십시오 :

$('#file').click(function(e){ 

    var email_id_upload= $('#email_id_upload').val(); 
    var id = $('#id').val(); 
    if(email_id_upload.length !==0 && id.lenght !==0) 
    { 
    //allow upload window to pop up 

    } 
    else 
     { 
      e.preventDefault(); 
      if(email_id_upload.length ===0 && id.length ===0) 
      {$('#message_content2_1').html("<span style='color:red'>Please fill email id and audit id</span>");} 
      else{ 
      if(email_id_upload.length ===0) 
      {$('#message_content2_1').html("<span style='color:red'>Please fill email id</span>");} 
      if(id.length ===0) 
      {$('#message_content2_1').html("<span style='color:red'>Please fill email id and audit id</span>");} 
      } 
     } 
});