Form verification within a Modal

[ArtcoInc]

I have a Modal pop-up where I ask my customers to enter an email address. The code works in that when the customer enters their email address and clicks on Submit, the email address is correctly added to the database. But, ...

Initially, the modal did not close when the customer clicked on Submit. I added <script> to close the modal when Submit was clicked, which worked, but ...

Initially, I did no error checking or verification that the customer actually entered an email address. So, if the customer left the field empty, a blank record was added to the database. I then added the 'Required' condition to the field. This would pop up a "Please fill out this field' warning. But, if the customer left the field empty, the Modal would close (because of the script added earlier), and the "Please fill out this field" warning would appear on the main screen, pointing at nothing. But, at least no empty record was added to the database.

I would like some type of verification that an email address was entered. Ideally, it would also check that what was entered was at least in the proper email format. Then, if everything validates, the record would be written to the database and the Modal would close. If things don't validate, the modal stays open and asks for a valid entry.

Here's what I have so far, including the now commented out script to close the Modal:
 

<!--
// <script>
// $(function(){
//   $('#myFormSubmit').click(function(e){
//     $('#stockalertModal').modal('hide')
//   });
// });
// </script>
-->



<!-- BOF Stock Alert Modal -->

  <div class="modal fade" id="stockalertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
          </button>

          <h4 class="modal-title" id="myModalLabel">
            <?php echo MODULE_CONTENT_PRODUCT_INFO_OOS_NOTIFICATIONS_MESSAGE_1 .'" '. $product_info['products_name']. ' "'. MODULE_CONTENT_PRODUCT_INFO_OOS_NOTIFICATIONS_MESSAGE_2; ?>
          </h4>

        </div>

        <div class="modal-body">

<?php

          echo tep_draw_form('external_notification', tep_href_link('product_info.php', '', $request_type, false), 'get', 'class="form-horizontal" id="notification_signup" ');

            echo tep_draw_input_field('email_address', '', 'required id="c_email" placeholder="' . MODULE_CONTENT_PRODUCT_INFO_OOS_NOTIFICATIONS_PLACEHOLDER . '"', 'email');

            echo tep_draw_hidden_field('product_id', $products_id);

?>

            <br/>
          </div> <!-- EOF modal-body //-->


          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel </button>

            <button type="submit" class="btn btn-primary" id="myFormSubmit"> Submit </button>

          </div> <!-- EOF modal-footer //-->
        </form>

      </div> <!-- EOF modal-content //-->
    </div> <!-- EOF modal-dialog //-->
  </div> <!-- EOF modal fade //-->

<!-- EOF Stock Alert Modal -->

 

Any assistance would be appreciated! TIA

Malcolm

[♥JcMagpie]

This should give you what you need.

http://reusableforms.com/d/p3/jquery-popup-contact-form-with-validation

[burt]

OK...some pointers;

1. in your .js bind the checking to the Submit of the Form, NOT the click of the Button
   - this will allow the HTML5 email checking to do its thing
    
2. On submit, prevent the default action of the Form and also ajax Post the email address to a different file for it to be added to the database
   - this can also manipulate the modal to give a "success" message
    
3. For now, forget about closing the modal...
   - if you close it you won't be able to easily see and understand what is going on

Those pointers 1 and 2 should be enough to get you at least another few yards forward.

[ArtcoInc]

@JcMagpie

Have you used any of their forms before? I have been able to get most of this to work, but ran into a snag. When I sent a message to them through their Contact Us page, it didn't work (the error message said, "Whoops, looks like something went wrong.") Doesn't inspire much confidence, does it?

@burt

As always, thank you! Let me see if I can figure that out ...

Malcolm

[♥JcMagpie]

9 hours ago, ArtcoInc said:

When I sent a message to them through their Contact Us page, it didn't work (the error message said, "Whoops, looks like something went wrong.") Doesn't inspire much confidence, does it?

Yes several times, The point was they show all the workings of the modal form and how they do verification, not to simply copy a form! Oh and the forms work fine by the way.

Anyway it was just a suggestion so not a problem. 

 

[burt]

13 hours ago, ArtcoInc said:

As always, thank you! Let me see if I can figure that out ...

If you get stuck or find yourself going round in circles...I can put together a hard-coded (ie, quick and ugly) example...

Just let me know.

[ArtcoInc]

@JcMagpie

I have tried two different browsers on their Contact Us page, and neither work. Maybe you can help ...

In their form.js file, near the top, is this line:

if(data.result == 'success')

Where is data.result defined? Without it being defined, it always results in the error message being shown.

[♥JcMagpie]

1 hour ago, ArtcoInc said:

@JcMagpie

I have tried two different browsers on their Contact Us page, and neither work. Maybe you can help ...

In their form.js file, near the top, is this line:

if(data.result == 'success')

Where is data.result defined? Without it being defined, it always results in the error message being shown.

Why are you using the contact us form? Go to the main page and pick the type of form that best meets your requirement lots to pick from then download the files and follow the instructions.

This is a BS form with validation and server side php form handler  should be all you need.

http://reusableforms.com/d/e2/bootstrap-contact-form-with-validation

I did this over 6 months ago so don't remember the details but it works fine.

You can see it working on the test site both on the contact us on home page and in the contact us in the product info page, they are done slightly differently in each one. I kept them simple but you can make the validation as complex as you like.

https://www.justfastfood.com/

Hey I'm just a simple shop keeper, I'm sure Burt will be able to offer you much better guidance.

[ArtcoInc]

@JcMagpie

I was using the Contact Us form because that was the one you linked to in your first post.

The form you just linked to also has the same jQuery code in it. While I know nothing about jQuery, per the description on the web site, the jQuery code hands things off to a server side handler, which in this case, they call handler.php. Now this calls a library called FormHandler, which calls other libraries, which ...

Thank you anyway.

PS: I tried their Contact Us page again with a different computer (and OS), and got the same "Whoops" message.

[♥JcMagpie]

7 minutes ago, ArtcoInc said:

I was using the Contact Us form because that was the one you linked to in your first post.

If you care to look carefully the link is to a specific form to down load and NOT to the contact us form on the website! The contact us link appears on all the sites pages!

Anyway my limited skills fall far short of your requirements so I apologize for wasting your time.

[ArtcoInc]

@JcMagpie

Thank you for your assistance. It's obvious that I wasn't clear ...

I tried to reach the people at the ReusableForms website, using their Contact Us page on their site. I tried different computers, different operating systems, and different browsers. I was not able to send them a message. I acknowledge that you were able to reach them; for whatever reason, I wasn't.

And, as I said, I did look at their code. Each piece required another piece, which required another piece, which ...

In the end, I gave up and moved on. It's not a slight on you. I, too, am a simple store owner, and a 'copy and paste' coder at best. Fortunately, I was able to get some assistance that pointed me in the right direction.

Onward to the next challenge ..

M

[♥JcMagpie]

very happy to hear you got your problem sorted. Perhaps you would care to share you solution with the community? It may help others facing the same problem.

I'm sure people will be interested in a nice secure Modal contact us form with validation that can all be done in a single file.