경고 메시지로 부트 스트랩 모달의 사용자 입력 유효성을 검사하지 못합니다.

Question

모달을 사용하지 않고 일반 페이지에서 사용자 양식의 유효성을 검사 할 수 있습니다. 빈 텍스트 필드가있는 양식을 제출하면 경고가 표시 될 수 있습니다.

이제 모달 안에 양식을 만들고 유효성 검사를 시도하지만 유효성 검사가 나타나지 않고 공백 데이터를 데이터베이스에 삽입하려고합니다.

다음은 부분 코드입니다.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Upload </h4> 
     </div> 
     <div class="modal-body"> 

     <form method="POST" > 

      <p>EventTitle : 
      <input type="text" name="eTitle" id="eTitle" placeholder="Say something about this image..."> 
      </p> 

      <script type= "text/javascript"> 
      $(document).ready(function(){ 
     $('#createEvent').click(function(){ 

      var event_Title = $('#eTitle').val(); 
      if(event_Title =='') 
      { 
       alert("Title cannot be empty"); 
       return false; 
      } 

      }); 

      }); 
      </script> 

     </div> 
     <div class="modal-footer"> 
     <input type="submit" name="createEvent" id="createEvent" value="Insert" class="btn btn-info"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </form> 
    </div> 

Answer 1

빈 입력의 유효성을 검사하려면 내장 HTML 필수 속성을 사용할 수 있습니다.

예 : <input type="text" name="eTitle" id="eTitle" placeholder="Say something about this image..." required /> 그렇지 않으면

당신은 내가 HTML 코드 내부에서 자바 스크립트를 삭제하는 것이 좋습니다, if (!event_Title.length > 0) {...}

하나 더 조언을 사용하려고하고 파일의 맨 아래에 또는 외부 파일에 넣어 수 .

호프가 도움이 되었기 때문에 도움이되지 않는다면 연락 주시기 바랍니다.