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
Posted (edited)

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

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.