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
... View more