AJAX Subscription Form

I'm encountering some issues with the AJAX Subscription Form.

My form has two fields, an email field and a device type field which has 2 radio buttons (iOS and Android). At the minute the form submits whenever the email is filled in even though the device type is empty.

Is there a way to ONLY submit the form when I have the both the fields filled in?

Here's the code I'm using. I've tried checking if all the input fields are empty but I don't think it's working.

$('input').each(function() {
    if ($(this).val() == '') {
      isFormValid = false;
    }
  });
    
  if (isFormValid) {
    $('#subForm').submit(function (e) {
           
      e.preventDefault();
      $.getJSON(
      this.action + "?callback=?",
      $(this).serialize(),
      function (data) {
        if (data.Status === 400) {
                    
          // alert("Error: " + data.Message);
        
        } else { // 200
                    
          // alert("Success: " + data.Message);
          
          $('.cards, #subForm').slideUp(400);
          $('.rare-card').slideDown(400);
          
        }
      });
            
    });
  }
roshodgekiss roshodgekiss, 5 years ago

Hey there kachunchau, the best way to go about this is to add your own client-side validation, so the form doesn't submit unless all fields are filled in. Here's a great example to help get you started.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
kachunchau, 5 years ago

Hey,

I can get the Validate Plugin to validate before submit but on completion it directs me to a separate page which I do not want.

Here's the code?

$('#subForm').validate({
  errorElement: "span",
  errorPlacement: function(error, element) {
    error.insertBefore(element.prev());
  },
  submitHandler: function(form) {
    $(this).ajaxSubmit({
      type:      'POST',
      url:       'http://acountname.createsend.com/t/r/s/ykdkzy/',
      data: dataString,
      dataType:  'jsonp',
      success: function(data) {
        if (data.Status === 400) {
        } else { // 200          
          $('.cards, #subForm').slideUp(400);
          $('.rare-card').slideDown(400);
        }
      }
      
    });
  }  
});

Any help would be great.

Thanks.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free