无法通过警报消息验证引导模式中的用户输入

时间:2017-11-07 14:07:55

标签: javascript html forms modal-dialog

我可以在普通页面中验证用户表单而不使用模态,如果提交带有空文本字段的表单,则可以弹出警报。

现在我试图在模式中创建表单并尝试验证它,但验证没有显示并将空白数据插入数据库。

这是部分代码。

<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>

1 个答案:

答案 0 :(得分:0)

例如,您可以使用内置的HTML required属性来验证空输入。

例如:<input type="text" name="eTitle" id="eTitle" placeholder="Say something about this image..." required />

否则您可以尝试使用if (!event_Title.length > 0) {...}

还有一条建议,我建议从html代码中删除javascript并将其放在文件底部或外部文件中。

希望这有帮助,如果这不起作用,请随时联系。