javascript - 自定义对话框未显示

Question

我正在编写一些 javascript 和 HTML，我想为用户错误处理(不填写字段)创建自定义对话框。由于某种原因，当用户发生错误时，这些框不会显示。我的 Java 脚本和 html 如下:

        <script>$(document).ready(function(){
              $('#submit_button').click(function(){
                    ShowCustomDialog();
                });
                     });

        function ShowCustomDialog()
        {
            var name = document.getElementById('name');
            var address = document.getElementById('email');
            var reason =  document.getElementById('reason');
            var message = document.getElementById('message');
            if(name.value == ''){
                ShowDialogBox('Warning','Enter your name','Ok','', 'GoToAssetList',null);
                return false;
            }
            if(email.value == ''){
                ShowDialogBox('Warning','Enter your email.','Ok','', 'GoToAssetList',null);
                return false;
            }
            if(reason.value == ''){
                ShowDialogBox('Warning','Select a reason','Ok','', 'GoToAssetList',null);
                return false;
            }
            if(message.value == ''){
                ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
                return false;
            }

        }

        function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
            var btn1css;
            var btn2css;

            if (btn1text == '') {
                btn1css = "hidecss";
            } else {
                btn1css = "showcss";
            }

            if (btn2text == '') {
                btn2css = "hidecss";
            } else {
                btn2css = "showcss";
            }
            $("#lblMessage").html(content);

            $("#dialog").dialog({
                resizable: false,
                title: title,
                modal: true,
                width: '400px',
                height: 'auto',
                bgiframe: false,
                hide: { effect: 'scale', duration: 400 },

                buttons: [
                                {
                                    text: btn1text,
                                    "class": btn1css,
                                    click: function () {

                                        $("#dialog").dialog('close');

                                    }
                                },
                                {
                                    text: btn2text,
                                    "class": btn2css,
                                    click: function () {
                                        $("#dialog").dialog('close');
                                    }
                                }
                            ]
            });
        }</script><form method="post" action="MAILTO:me" enctype="text/plain" onsubmit=" return ShowCustomDialog()">

  <div class="row">
    <label>Your Name:</label>
    <input type="text" id="name" name="name" size="20" />
  </div>
  <div class="row">
    <label>Your E-mail:</label>
    <input type="text" id="email" name="email" size="20" />
  </div>
  <div class="row">
    <label>Reason for Report:</label>
    <select id="reason" name="reason" />
    <option value="">Please Select...</option>
    <option value="bug">Bug Report</option>
    <option value="feature">Feature</option>
    <option value="tech_support">Technical Support</option>
    <option value="other">Other...</option>
    </select>

  </div>

  <div class="row">
    <label>Your Message:</label>
    <textarea type="text" id="message" name="message" rows="7" cols="30"></textarea>
  </div>
  <input id="submit_button" type="submit" value="Send E-mail" />
  <div id="dialog" title="Alert message" style="display: none">
    <div class="ui-dialog-content ui-widget-content">
      <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
        <label id="lblMessage">
        </label>
      </p>
    </div>
  </div>
</form>

如果有任何帮助，我将不胜感激

Answer 1

当按钮上有点击事件时，必须返回 false 或使用 e.preventDefault()。否则，该按钮会提交页面，并且您永远不会看到该对话框。

例如

$(document).ready(function(){
          $('#submit_button').click(function(e){
            if(!ShowCustomDialog()) {
              e.preventDefault()
            }
          });
});

在我的示例中，您应该向 ShowCustomDialog 函数添加 return true。

function ShowCustomDialog()
{
   ...
   if(message.value == ''){
     ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
     return false;
   }

   return true;
}