I have a script that performs client-side validation, then fires off an AJAX post to submit form field values to an external address validation program - then returns a JSON response.
I have a select field in the form that allows a person to manually enter their address. I've added a class of "manual" to this select option. Otherwise, they can select any number of pre-defined addresses. The predefined addresses do not have a class associated with them.
I DO NOT want the AJAX post to fire if a pre-defined select option is selected. Only if the select option has a class of manual. I DO, however, want to preserve the client-side validation.
This is what I thought would work:
if (!$("#ShipTos option:selected").hasClass("manual"))
{
$("#Forms").submit();
return false;
}
Form HTML
<form name="Form" id="Forms" method="post" action="WebCatPageServer.exe" class="uniForm">
<input name="IsAjax" type="hidden" value="Yes" />
<input name="Action" type="hidden" value="SHIPTOVALIDATE"/>
<!-- <input name="Action" type="hidden" value="VerifyOrder"/>-->
<fieldset class="inlineLabels top">
<h2>Order Details</h2>
<div class="ctrlHolder first">
<label for="orderdesc">Order Description</label>
<input name="Order Desc" id="OrderDesc" type="text" class="textInput small" tabindex="1" value="SPI_PlaceOrder_Desc"/>
</div>
<div class="ctrlHolder">
<label for="po">PO # <span class="redasterisk">*</span></label>
<input name="Cust Po" id="PoJobNo" type="text" class="textInput small required" maxlength="20" tabindex="2" value="SPI_PlaceOrder_PONum"/>
</div>
<!-- <div class="ctrlHolder">
<label for="jobname">Job Name</label>
<input name="Job Name" id="CustJobName" type="text" class="textInput small" maxlength="15" tabindex="3" value="SPI_PlaceOrder_JobName"/>
</div> -->
<div class="ctrlHolder">
<label for="shipvia">Ship Via <span class="redasterisk">*</span></label>
<select name="Ship Via" id="shipvia" class="selectInput small required" tabindex="4"/>
<option value="" class="default">Select Ship Method</option>
SPI_ShipVia
</select>
</div>
<div class="ctrlHolder" id="pickupdate">
<label for="datepickup">Requested Pickup Date <span class="redasterisk">*</span></label>
<input name="datepickup" id="datepickup" type="text" class="textInput small" tabindex="5" value="SPI_PlaceOrder_DateReq">
</div>
<div class="ctrlHolder" id="shipdate">
<label for="dateship">Requested Delivery Date <span class="redasterisk">*</span></label>
<input name="dateship" id="dateship" type="text" class="textInput small" value="" tabindex="6">
</div>
<div class="ctrlHolder" id="shipto">
<label for="ShipTo">Ship To <span class="redasterisk">*</span></label>
<select name="ShipTos" id="ShipTos" class="selectInput auto required" tabindex="7">
<option value="">Select an Option</option>
<option value="ShipToManual" class="manual">Manually Enter Address</option>
SPI_ShipToList
</select>
<br />
</div>
</fieldset>
<fieldset class="inlineLabels" id="shipinfo">
<h2>Shipping Information</h2>
<div class="ctrlHolder first">
<label for="YourName">Your Name <span class="redasterisk">*</span></label>
<input name="Your Name" id="Your_Name" type="text" class="textInput small required" tabindex="8" value="SPI_CustContact" />
</div>
<div class="ctrlHolder">
<label for="CompanyName">Company Name <span class="redasterisk">*</span></label>
<input name="Company Name" id="Company Name" type="text" class="textInput small required" tabindex="9" value="SPI_CustCName"/>
</div>
<div class="ctrlHolder">
<label for="Address1">Address 1 <span class="redasterisk">*</span></label>
<input name="Address_1" id="Address_1" type="text" maxlength="30" class="textInput small required" tabindex="10" value="SPI_CustAddr1"/>
</div>
<div class="ctrlHolder">
<label for="Address2">Address 2</label>
<input name="Address_2" id="Address_2" type="text" maxlength="30" class="textInput small" tabindex="11" value="SPI_CustAddr2"/>
</div>
<div class="ctrlHolder">
<label for="City">City <span class="redasterisk">*</span></label>
<input name="City" id="City" type="text" maxlength="25" class="textInput small required" tabindex="12" value="SPI_CustCity"/>
</div>
<div class="ctrlHolder">
<label for="State">State <span class="redasterisk">*</span></label>
<select name="State" id="State" class="selectInput small required" tabindex="13">
<option value="">Select State</option>
SPI_StateList
</select>
</div>
<div class="ctrlHolder">
<label for="ZipCode">Zip Code <span class="redasterisk">*</span></label>
<input name="Zip" id="Zip" type="text" maxlength="6" class="textInput small required zipcode" tabindex="14" value="SPI_CustZip"/>
</div>
<div class="ctrlHolder">
<label for="Phone">Phone <span class="redasterisk">*</span></label>
<input name="Phone Number" id="Phone" type="text" class="textInput small required phone" alt="phone-us" tabindex="15" value="SPI_CustPhone"/>
</div>
<div class="ctrlHolder">
<label for="Fax">Fax</label>
<input name="FaxNumber" id="Fax Number" type="text" class="textInput small fax" alt="phone-us" tabindex="16" value="SPI_CustFax"/>
</div>
<div class="ctrlHolder">
<label for="">E-mail <span class="redasterisk">*</span></label>
<input name="Email" id="Email" type="text" class="textInput small required email" tabindex="17" value="SPI_CustEmail"/>
</div>
</fieldset>
<fieldset class="inlineLabels">
<h2>Order/Shipping Notes</h2>
<!-- SPI_Html_Optional_OrdNotes
<div class="ctrlHolder first">
<label for="notes">Order Notes </label>
<textarea name="OrderNotes" id="ta" cols="26" rows="7" tabindex="18"></textarea><br />
<p class="formHint"><b>(Maximum characters: 175) <span id="charLeft"></span> Characters left</b><br />
(Cross streets, special instructions, etc.)</p>
<br />
</div>
SPI_Html_Optional_OrdNotes -->
<!-- SPI_Html_Require_OrdNotes
<div class="ctrlHolder">
<label for="notes">Order Notes (Cross streets, etc.) <span class="redasterisk">*</span></label>
<textarea name="OrderNotes" id="notes" cols="26" rows="7" tabindex="19"> </textarea>
<p class="formHint">(Cross streets, special instructions, etc.)</p>
<br />
</div>
SPI_Html_Require_OrdNotes -->
</fieldset>
<fieldset class="inlineLabels">
<h2>Continue To Next Step</h2>
<div class="buttonHolder">
<label for="freightmsg">**Applicable freight charges will be applied at the time of invoicing.**</label>
<input name="continuetocheckout" type="submit" class="button red smallrounded" value="Continue >" alt="Continue to Next Step" tabindex="20"/>
</div>
</fieldset>
</form>
Validation & AJAX Functions
jQuery(document).ready(function($) {
$.metadata.setType("attr", "validate");
$("#Forms").validate({
rules: {
datepickup: {
required: true,
date: true
},
dateship: {
required: true,
date: true
}}
});
});
$(function() {
//$("#Forms").submit(function() {
$("input[name='continuetocheckout']").click(function() {
if (!$("#Forms").valid())
return false;
if (!$("#ShipTos option:selected").hasClass("manual"))
{
$("#Forms").submit();
return false;
}
$.ajax({
type: 'post',
url: 'WebCatPageServer.exe',
dataType : 'json',
data: $("#Forms").serialize(),
success:function(data){
$.each(data, function(index, val) {
$("input[name='"+index+"'], select[name='"+index+"']").val(val);
});
if (data.AddressError==false && data.ZipError == false )
{
$("input[name='Action']").val('VerifyOrder');
$("input[name='IsAjax']").val("No");
$("#Forms").submit();
return true;
}
else
{
if(data.ZipError==true && data.AddressError==false)
{
$("input[name='City'], select[name='State'], input[name='Zip']").addClass('error');
$("input[name='City']").after('<label class="error" for="Zip" generated="true">This City/State/Zip is not valid. Please correct.</label>')
}
if(data.AddressError==true && data.ZipError==true)
{
$("input[name='City'], select[name='State'], input[name='Zip'], input[name='Address_1']").addClass('error');
$("input[name='Address_1']").after('<label class="error" for="Address_1" generated="true">This address is not valid. Please correct.</label>')
}
return false;
}
}
});
return false;
});
});
</script>
I appreciate your help!