我正在尝试同时使用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!#$%&'*+\/=?^_`{|}~.-]+@[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文件,因此您可以更轻松地进行测试。