需要重新打印html5电子邮件

时间:2017-01-15 01:05:22

标签: javascript html5 validation required remodal

我正在尝试同时使用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文件,因此您可以更轻松地进行测试。

0 个答案:

没有答案