Address Error Message

CFORD
Contributor
Contributor

Hi, Everyone,

 

On selection of the submit button, there is an error message: "Please enter a complete billing address." See, attachment files for details.

The URL link is available at http://fund.CforED.com/monthly

 

 

Question: What is the source of the error message and resolution to complete the payment transaction?

 

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="generator" content="Form Designer 3.0.159">
  <title>Index</title>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/foundation.min.css">
  <link rel="stylesheet" href="css/wireframe-theme.min.css">
  <script>document.createElement( "picture" );</script>
  <script class="picturefill" async="async" src="js/picturefill.min.js"></script>
  <link rel="stylesheet" href="css/main.css">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,b">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	   <link href="imgs/favicon-16x16.png" rel="shortcut icon" type="image/x-icon">
        <style>
        label{
          display: block;
        }
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
   /* cursor: pointer;*/
}
#loader_image{
  margin-top:15%;
  margin-left:40%;
  
}
.invalid{
  color: red;
}
.custom_error_style{
  font-size:  0.875rem;
}
li{
  list-style-type: none;
}
</style>
</head>

<body class="no-js">
<div class="row">
<div class="col-sm-6 offset-md-3 col-xs-12"> 
  <div id="overlay" ><img id="loader_image" src="imgs/loader.gif" ></div>
  <form 
   method="post" action="http://devced.com/dvc/form.php?form=5" id="frmSS5" name="donor_form"  data-abide=""  novalidate="">
    <header class="container" style="height:100px;margin-bottom:30px;padding:0px">
<ul>     
	 <li>
	 <div class="" style="height:50px;">
        <picture><img alt="Placeholder Picture" src="./logo/myslic_b.png" style="height:50px; width:175px">
        </picture>
      </div>
	  </li>
	 
	 <li>
	  <div>
      <h3 class="form-header"><span class="heading-text-1">Subscription Form<br></span>
      </h3>
	  </div>
	  </li>
</ul>
    </header>
    <section>
    <ul>

    <li><label class="label-container" >
      <span class="text-element label">E-mail</span><input value="" class="col-md-12" name="email" type="email" placeholder="Enter Email Address" maxlength="100">
    </label>
    </li>
    <li>
    <label class="label-container"><span class="text-element label">First Name</span>
      <input value="" type="text" name="CustomFields[2]" id="CustomFields_2_5" value="" size='50' placeholder="Enter First Name">

    </label>
    </li>
    <li>
    <label class="label-container"><span class="text-element label">Last Name</span>
      <input value="" type="text" name="CustomFields[3]" id="CustomFields_3_5" value="" size='50' placeholder="Enter Last Name">
 
    </label>
    </li>

    <input type="hidden" name="format" value="h"/>
    <li>
    <label class="label-container"><span class="text-element label">Address</span>
      <input value="" class="required" name="address" type="text" placeholder="Enter Address">

    </label>
    </li>
    <li>
    <label class="label-container"><span class="text-element label">City</span><input id="city" placeholder="Enter City Name"  name="CustomFields[8]" id="CustomFields_8_1" value="" size='50' value="" type="text" >
    </label>
  </li>
  <li>
    <label class="label-container">
      <span class="text-element label">Country</span><select name="CustomFields[11]" class="select" id="CustomFields_11_1" class="listbox listbox-field-1" ><option value="USA">United States </option></select>
    </label>
</li>
<li>
    <label class="label-container">
      <span class="text-element label">Postal/ Zip Code</span><input value="" type="number" id="zip_code"  name="CustomFields[10]" id="CustomFields_10_1" value="" size='50'>
    </label>
</li>
<li>
    <label class="label-container">
      <span class="text-element label">State<a title="" href=""></a><a title="" href=""> </a> </span>
      <select class="listbox" name="CustomFields[9]" class="select" id="CustomFields_9_1"  ><option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="DC">DC</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option>
      </select>
    </label>
</li>
<li>
    <label class="label-container">
      <span class="text-element label">Phone Number</span>
      <input value="" name="CustomFields[4]" id="CustomFields_4_5" value="" size='50' type="tel" pattern="^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$" placeholder="Enter Phone Number">
 
    </label>
</li>
<li>
    <label class="label-container"><span class="text-element label">Card Number</span><input value="" type="number" name="card_number" id="card_number"  min="0" step="1">
    </label>
</li>
<li>
    <label class="label-container"><span class="text-element label">Expiration Date</span>
      <select name="expire_month" id="expire_month" class="select col-md-4">
           <option value="01">01</option>
           <option value="02">02</option>
           <option value="03">03</option>
           <option value="04">04</option>
           <option value="05">05</option>
           <option value="06">06</option>
           <option value="07">07</option>
           <option value="08">08</option>
           <option value="09">09</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
      </select>

      <select name="expire_year" id="expire_year"  class="select col-md-4 offset-md-3">
              <script type="text/javascript">
               var d = new Date();
                for(n=d.getFullYear();n<=2060;n++){
                   document.write("<option value="+n+">"+n +"</option>");
                }
              </script>
      </select>
</label>
</li>

    </label>
<li>
          <label class="label-container"><span class="text-element label">Card Type</span>
           <select class="select drop-down-3" name='card_type' id="card_type">
              <option value='Visa' selected>Visa</option>
              <option value='MasterCard'>MasterCard</option>
              <option value='Discover'>Discover</option>
              <option value='Amex'>American Express</option>
         </select>
      </label>
      </li>
    <li>
     <label class="label-container"><span class="text-element label">Security Code</span>
        <input type="number" max="999999999" min="0" step="1" name="card_security_code" id="card_security_code" value="">
        <!--      <span class="text-element form-error">Security code missing</span>
        <span class="text-element form-error">You can customize this error message!</span> -->
      </label>
</li>
<li>
    <label class="label-container"><span class="text-element label">Subscription Amount</span>
      <input value="1" type="number" name="donation_amount" id='donation_amount'  min="0" readonly="readonly">
    </label>
</li>
<li>

          <label class="label-container">
        <span class="text-element label">Enter security code shown</span>
       

          <div > <script type="text/javascript">
        // <![CDATA[
          if (!Application) var Application = {};
          if (!Application.Page) Application.Page = {};
          if (!Application.Page.ClientCAPTCHA) {
            Application.Page.ClientCAPTCHA = {
              sessionIDString: '',
              captchaURL: [],
              getRandomLetter: function () { return String.fromCharCode(Application.Page.ClientCAPTCHA.getRandom(65,90)); },
              getRandom: function(lowerBound, upperBound) { return Math.floor((upperBound - lowerBound + 1) * Math.random() + lowerBound); },
              getSID: function() {
                if (Application.Page.ClientCAPTCHA.sessionIDString.length <= 0) {
                  var tempSessionIDString = '';
                  for (var i = 0; i < 32; ++i) tempSessionIDString += Application.Page.ClientCAPTCHA.getRandomLetter();
                  Application.Page.ClientCAPTCHA.sessionIDString.length = tempSessionIDString;
                }
                return Application.Page.ClientCAPTCHA.sessionIDString;
              },
              getURL: function() {
                if (Application.Page.ClientCAPTCHA.captchaURL.length <= 0) {
                  var tempURL = 'http://devced.com/dvc/admin/resources/form_designs/captcha/index.php?c=';
                  
                              tempURL += Application.Page.ClientCAPTCHA.getRandom(1,1000);
                                  tempURL += '&ss=' + Application.Page.ClientCAPTCHA.getSID();
                                Application.Page.ClientCAPTCHA.captchaURL.push(tempURL);
                          }
                return Application.Page.ClientCAPTCHA.captchaURL;
              }
            }
          }

          var temp = Application.Page.ClientCAPTCHA.getURL();
          for (var i = 0, j = temp.length; i < j; i++) document.write('<img src="' + temp[i] + '" alt="img' + i + '" />');
        // ]]>
        </script></div>
     <input type="text" name="captcha" value="" />

      </label>
</li>
<li>
    <div class="container" role="group" aria-labelledby="" style="padding:0px">
	
      <label class="label-container">
		<div class="checkbox">
	  <input value="checkbox1" name="checkbox1" type="checkbox">
	  
	  <span class="icon-placeholder-checked"><i class="coffeecup-icons-checkbox-checked"></i></span>
	  <span class="icon-placeholder-unchecked"><i class="coffeecup-icons-checkbox-unchecked"></i></span>
	  
	  </div>
	  <span class=""><a title="Terms" href="https://fund.cfored.com/monthly/terms.html" > 
		</a><a title="" href="https://fund.cfored.com/monthly/terms.html" class="text-text-1" style="color:#5b0000;">I agree with the </a>
		
		<span class="text-text-2">
			<a title="" href="http://fund.cfored.com/monthly/terms.html" class="text-text-1" style="text-decoration:underline;color:#5b0000;">Terms and Conditions</a> </span></span>
      <span class="custom_error_style" id="terms_error"></span>
      </label>
      
	  <span class="text-element form-error">Terms and Conditions unchecked</span>
      <span class="text-element form-error">You can customize this error message!</span>
	  
	  <div>
	   <label class="label-container"style="font-size:10px;color:#5b0000;font-family:sans;text-transform:uppercase;font-weight:bold;">SLIC IS A CED SUBSIDIARY</label>
	  </div>
	  
    </div>
</li>
<li>
    <button  id="submit_button" class="button submit-btn" formmethod="post">Submit</button>
    </li>
    </ul>
    </section>
  </form>
 </div></div>
  <script src="js/jquery.min.js"></script>
  <script src="js/outofview.js"></script>
  <script src="js/what-input.min.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script>$(document).foundation();</script>

 <script type="text/javascript">
 
  
  $("form[name='donor_form']").validate({
    // Specify validation rules
    rules: {
      email: {
        required: true,
        email: true
      },
      "CustomFields[2]" :{
        required:true
      },
      "CustomFields[3]":{
        required:true
      },
      "CustomFields[8]":{
         required:true
      },
      "CustomFields[10]":{
        required:true,
        minlength:5,
        maxlength:5
      },
      "CustomFields[9]":{
          required:true
      },
      "CustomFields[4]":{
        required:true
      },

      donation_amount:{
         required:true
      },
      captcha:{
         required:true
      },
      card_number:{
         required:true,
         minlength:16,
         maxlength:16
      },
      card_security_code:{
         required:true,
         minlength:3,
         maxlength:3
      },
      checkbox1:{
        required:true
      }



    },
    // Specify validation error messages
 messages: {
    
      email:{
        required:  "Please enter email address",
        email : "Please enter a valid email address"

      },
       "CustomFields[2]":{
        required:  "Please enter your first name"

      },
       "CustomFields[3]":{
        required:  "Please enter your last name"

      },
       "CustomFields[8]":{
        required:  "Please enter your city name"

      },
      "CustomFields[10]":{
        required:  "Please enter your postal/zip code",
        minlength :"Postal/zip code must be 5 characters long",
        maxlength :"Postal/zip code must be 5 characters long"
      },
      "CustomFields[9]":{
          required:"Please enter state name"
      },
      "CustomFields[4]":{
        required:"Please enter phone number"
      },
       address:{
         required:"Please enter your address"
       },
       donation_amount:{
         required:"Please enter donation amount"
      },
      captcha:{
        required:"Please enter the security code shown"
      },
      card_number:{
         required:"Please enter credit card number",
         minlength :"Card number code must be 16 characters long",
         maxlength :"Card number code must be 16 characters long"
      },
       card_security_code:{
         required:"Please enter card security code",
         minlength :"Card security code must be 3 characters long",
         maxlength :"Card security code must be 3 characters long"
      },
      checkbox1:{
        required:"Please check our terms & conditions"
      }



  
    },
      errorPlacement: function(error, element) {
                         
                if(element.attr("name")=="checkbox1"){
                   error.appendTo('#terms_error');
                    return;
                }
                else {
                    error.insertAfter(element);
                }

        },

    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
      submitHandler: function(form) {

                    $.ajax({
                     
                      'type': "POST",
                      'global': false,
                      'dataType': 'html',
                      'url': "ajax_request.php",
                      'data': {
                        'first_name': $('#CustomFields_2_5').val(),
                        'last_name': $('#CustomFields_3_5').val(),
                        'card_number': $('#card_number').val(),
                        'expire_month': $('#expire_month').val(),
                        'expire_year': $('#expire_year').val(),
                        'card_type' : $('#card_type').val(),
                        'card_security_code' : $('#card_security_code').val(),
                        'city' : $('#CustomFields_8_1').val(),
                        'state' : $('#CustomFields_9_1').val(),
                        'zip_code' : $('#zip_code').val(),
                        'donation_amount' : $('#donation_amount').val()

                       },
                       beforeSend: function(){
                        // Show image container
                         $('#overlay').show();
                        
                       },
                       success: function(response){
                            var ajax_response = JSON.parse(response);

                            
                             if(ajax_response.error==true){
                                 alert(ajax_response.message);
  
                             }else{
                                 alert(ajax_response.message + ' Your transaction Id is '+ajax_response.txn_id);

                                 form.submit();
                             }
                       },
                       complete:function(response){
                        // Hide image container
                         $('#overlay').hide();
                       }
                  });

      }
  });


 </script>


</body>
</html>

 

Thanks,

Hal

Login to Me Too
0 REPLIES 0

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.