Need help validating additional fields in subscription form

[simcoweb]

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.

[denno020]

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 July 22, 2018 by denno020