Menu icon Foundation
Trigger Reveal on form submit with Abide validation

Hi,
This is what i'm trying to achieve.. a client-side validation.
When you send a form, the reveal modal window appears upon successful sending i'm validating the fields using Abide everything is working just need to figure out how to trigger the modal.

Thanks

<form data-abide class="validate" id="contact-form">
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-4 columns">
<label for="contact_name" class="right inline">CONTACT NAME <small>required</small></label>
</div>
<div class="small-8 columns">
<input type="text" id="name" placeholder="Enter your name" required>
<small class="error">Name is required .</small>
</div>
</div>

<div class="row">
<div class="small-4 columns">
<label for="email" class="right inline">CONTACT EMAIL ADDRESS <small>required</small></label>
</div>
<div class="small-8 columns">
<input type="email" id="email" placeholder="Enter your email address" required>
<small class="error">An email address is required.</small>
</div>
</div>

<div class="row">
<div class="small-4 columns">
<label for="phone_number" class="right inline">CONTACT PHONE NUMBER </label>
</div>
<div class="small-8 columns">
<input type="text" id="phone_number" pattern="number" placeholder="Enter your Phone Number">
</div>
</div>


<div class="row">
<div class="small-4 columns">
<label for="message" class="right inline">MESSAGE</label>
</div>
<div class="small-8 columns">
<textarea id="message" name="message" placeholder="Leave your message here."></textarea>
</div>
</div>

<div class="row">

<div class="large-1 columns">
</div>

<div class="large-8 large-offset-3 columns">
<input type="submit" class="medium button success radius" id="send_btn" data-reveal-id="sent-mail" value="SEND">

</div>
</div>


</div>
</div>
</form>

<div id="sent-mail" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>



<script>
$(document).foundation();
$('.validate').attr('data-abide', '');
</script>
            

         

revealabidevalidation

Hi,
This is what i'm trying to achieve.. a client-side validation.
When you send a form, the reveal modal window appears upon successful sending i'm validating the fields using Abide everything is working just need to figure out how to trigger the modal.

Thanks

<form data-abide class="validate" id="contact-form">
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-4 columns">
<label for="contact_name" class="right inline">CONTACT NAME <small>required</small></label>
</div>
<div class="small-8 columns">
<input type="text" id="name" placeholder="Enter your name" required>
<small class="error">Name is required .</small>
</div>
</div>

<div class="row">
<div class="small-4 columns">
<label for="email" class="right inline">CONTACT EMAIL ADDRESS <small>required</small></label>
</div>
<div class="small-8 columns">
<input type="email" id="email" placeholder="Enter your email address" required>
<small class="error">An email address is required.</small>
</div>
</div>

<div class="row">
<div class="small-4 columns">
<label for="phone_number" class="right inline">CONTACT PHONE NUMBER </label>
</div>
<div class="small-8 columns">
<input type="text" id="phone_number" pattern="number" placeholder="Enter your Phone Number">
</div>
</div>


<div class="row">
<div class="small-4 columns">
<label for="message" class="right inline">MESSAGE</label>
</div>
<div class="small-8 columns">
<textarea id="message" name="message" placeholder="Leave your message here."></textarea>
</div>
</div>

<div class="row">

<div class="large-1 columns">
</div>

<div class="large-8 large-offset-3 columns">
<input type="submit" class="medium button success radius" id="send_btn" data-reveal-id="sent-mail" value="SEND">

</div>
</div>


</div>
</div>
</form>

<div id="sent-mail" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>



<script>
$(document).foundation();
$('.validate').attr('data-abide', '');
</script>
            

         
Chris Oyler over 3 years ago

Within the promise or callback from your successful AJAX function, you can call
Javascript
$('#sent-mail').foundation('reveal', 'open');

That should do it.

Lincoln Gbenga Olagbaju over 3 years ago

Thanks so much Chris! it works! thanks for the assist .
Cheers