Jump to content
simcoweb

Need help validating additional fields in subscription form

Recommended Posts

Greetings. I'm using a newsletter subscription plugin that doesn't have parameters for making fields required (don't ask why). The system is connected to Mailchimp but because the first and last names are not 'required' many of the submissions have been email address only. I found this JQuery snippet that validates that the 'first name' field is populated before submission. The problem is I need the 'last name' field validated as well. I played around with the code but my syntax knowledge is really rusty and the two ways I tried to add that field into the mix failed.

Here's the code:

<script type="application/javascript">
(function($) {
$(document).ready(function() {

$(" .et_bloom_submit_subscription").click(function(){
if ($('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').attr('value') == '') {
$('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').addClass('et_bloom_warn_field');
return false;
} else {
$('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').removeClass('et_bloom_warn_field');
}
});

});
})(jQuery)
</script>

 

The last name field class is .et_bloom_subscribe_last which I tried splicing in a various ways but it didn't work. Can anyone provide the proper syntax to add this into the mix so that the 'warn_field' covers it as well? Thank you in advance.

Share this post


Link to post
Share on other sites

First, to make your code easier to read, I suggest you write it like this:

<script type="application/javascript">
  (function($) {
    $(document).ready(function() {
      $(" .et_bloom_submit_subscription").click(function() {
        var $subscibeButton = $(this); // same as $('.et_bloom_submit_subscription')
        var $form = $subscibeButton.closest('.et_bloom_form_container');
        var $firstName = $form.find('.et_bloom_subscribe_name input');

        if ($firstName.attr('value') == '') {
          $firstName.addClass('et_bloom_warn_field');
          return false;
        } else {
          $firstName.removeClass('et_bloom_warn_field');
        }
      });
    });
  })(jQuery)
</script>

It caches jQuery objects so that you're not having to constantly parse the DOM, which will give a slight performance boost, but it will also make it much more obvious as to where the last name check should go

 

<script type="application/javascript">
  (function($) {
    $(document).ready(function() {
      $(" .et_bloom_submit_subscription").click(function() {
        var $subscibeButton = $(this); // same as $('.et_bloom_submit_subscription')
        var $form = $subscibeButton.closest('.et_bloom_form_container');
        var $firstName = $form.find('.et_bloom_subscribe_name input');
        var $lastName = $form.find('.et_bloom_subscribe_last input');

        if ($firstName.attr('value') == '' || $lastName.attr('value') == '') {
          // Use .toggleClass so the second parameter will add/remove the warning class if only one of the fields is empty
          $firstName.toggleClass('et_bloom_warn_field', $firstName.attr('value') == '');
          $lastName.toggleClass('et_bloom_warn_field', $lastName.attr('value') == '');
          return false;
        } else {
          $firstName.removeClass('et_bloom_warn_field');
          $lastName.removeClass('et_bloom_warn_field');
        }
      });
    });
  })(jQuery)
</script>

There are a few other optimizations/updates that I would make to this code, if it were mine, but for the sake of simply answering the question, I won't change too much :).

Hope that helps!

Denno

Edited by denno020

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.