Remodal html5 email required

Question

I am attempting to use Remodal and html5 email required at the same time. Upon confirmation it doesnt validate and the window closes through, someone asked a similar question but the question wasnt answered.

I am trying to validate it before it hits the alert.

I dont know enough JS to write this fully myself so if the answer can be given instead of sending me to the resource(which I dont understand anyways) I would greatly appreciate it.

Here is my code:

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

I have attached the css and js files from my site so it is easier for you to test.

Remodal html5 email required

0 Answers0