1

我正在尝试同时使用Remodal和 html5 电子邮件required。在确认它没有验证并且窗口关闭后，有人问了一个类似的问题，但这个问题没有得到回答。

我正在尝试在它触发警报之前对其进行验证。

我不知道足够的JS来完全自己写这个，所以如果可以给出答案而不是将我发送到资源（无论如何我都不明白），我将不胜感激。

这是我的代码：

$(document).on('opening', '.remodal', function () {
        console.log('opening');
      });

      $(document).on('opened', '.remodal', function () {
        console.log('opened');
      });

      $(document).on('closing', '.remodal', function (e) {
        console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
      });

      $(document).on('closed', '.remodal', function (e) {
        console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
      });

      $(document).on('confirmation', '.remodal', function () {
        alert("I am an alert box!");
      });

      $(document).on('cancellation', '.remodal', function () {
        console.log('cancellation');
      });
<link href="http://briangonzales.net/del/css/remodal-default-theme.css" rel="stylesheet"/>
<link href="http://briangonzales.net/del/css/remodal.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://briangonzales.net/del/js/remodal.js"></script>

<a href="#modal">Modal</a>
    <div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
      <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
      <div>
        <h2 id="modal1Title">Remodal</h2>
        <form role="form" id="contact-form" method="post" class="col-md-6 col-md-offset-3">
                    
                        
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" required/>
                          </div>
                       
                        <div class="form-group" style="text-align:center;margin-bottom: 0px;">
                                <button type="submit" value="Submit" data-remodal-action="confirm" class="remodal-confirm">Send</button>
                        </div>
</form>
      </div>
      
        
    </div>

我已从我的站点附加了 css 和 js 文件，因此您可以更轻松地进行测试。

4

0 回答 0