Creating A Border Over Input Field Options

[Talis]

Hi, I have a "contact us" section on my website. Had to change it to accept a different program, but cannot seem to add a different border to "phone number" and "additional comments" field. The Email/Address has the right colour/sizing/type.

The correct colour size and type portion of it is: requiredInput {border: 2px groove #2F8203;}

Any help would be appreciated.

Thank you.

Full code below:

<div id="MainDivDomID" style="width:275px; margin-right:auto; margin-left:auto;"><div class="formHeaderClass"><div style="clear:both;"></div><h1 class="formHeaderTitleText">Request a Quote</h1><h3 class="formHeaderDescriptionText"></h3></div><form id="BacktellForm0231943" action="https://my.serviceautopilot.com/ProcessForm.aspx" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate()" style="background-color: white;"><input type="hidden" name="InputIframeID22" value="" \><input type="hidden" name="Source" value="web" /><input type="hidden" name="FormID" value="21158c25-6f8f-4099-913c-3cecb58eeadd" /><table class="formTableClass"><tr ><td class="formLeftColumnContent"><label class="formLabelClass">Name<span style="color:red;">*</span></label><br /><label style="width:40%; float:left;" class="boldNameClass labelMarginLeft">First</label><label class="boldNameClass">Last</label><div style="clear:both"></div><input name="e7190e03-6201-48f6-98c1-b93e7fb4921d_First" type="text" class="requiredInput labelMarginLeft" style="width:38%;" value="" /><input name="e7190e03-6201-48f6-98c1-b93e7fb4921d_Last" type="text" class="requiredInput labelMarginLeft" style="width:40%; display: inline-block; margin-left:3px;" value="" /></td></tr><tr ><td class="formLeftColumnContent"><label class="formLabelClass">Address<span style="color:red;">*</span></label><br /><span style="font-size:14px; width: 100%; " class="boldAddressClass labelMarginLeft" ></span><br /><input name="91d2fc35-a839-4797-a1b8-68c885320d07_Address" type="text" class="requiredInput labelMarginLeft" style="width:80%" value="" /><br /><span style="font-size:14px; width: 100%; " class="boldAddressClass labelMarginLeft" input name="91d2fc35-a839-4797-a1b8-68c885320d07_AddressTwo" type="text" class="requiredInput labelMarginLeft" style="width:98%" value="" /><br /><label style="font-size:14px; width: 38%; float: left; " class="boldAddressClass labelMarginLeft" >City</label><label style="font-size:14px; width: 27%; float: left; " class="boldAddressClass" >Province</label><label style="font-size:12px; width: 30%; float: left; " class="boldAddressClass" >Postal Code</label><br /><input name="91d2fc35-a839-4797-a1b8-68c885320d07_City" type="text" class="requiredInput labelMarginLeft" style="width:36%" value="" /><input name="91d2fc35-a839-4797-a1b8-68c885320d07_State" type="text" class="requiredInput" style="width:21%; display: inline-block; margin-left:5px; " value="" /><input name="91d2fc35-a839-4797-a1b8-68c885320d07_Zip" type="text" class="requiredInput" style="width:21%; display: inline-block; margin-left:5px;" value="" /></td></tr><tr ><td class="formLeftColumnContent"><label class="formLabelClass labelMarginLeft">Phone Number<span style="color:red;">*</span></label><br /><input name="33c6d9e8-422c-4c9b-adef-f8e62d2c106e" type="text" style="width:50%" class="labelMarginLeft" placeholder="" /><br /></td></tr><tr ><td class="formLeftColumnContent"><label class="formLabelClass">Email<span style="color:red;">*</span></label><br /><input name="e5dbc5f3-ba00-49c8-b82b-adaef8afbc1c" type="text" class="requiredInput" maxlength="255"style="width:60%; margin-left:10px;" value=""/></td></tr><tr ><td class="formLeftColumnContent"><label class="formLabelClass labelMarginLeft">Services Requested</label><br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Fertilizer & Weed Control" class="labelMarginLeft" /> Fertilizer & Weed Control <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Aeration & Overseeding" class="labelMarginLeft" /> Aeration & Overseeding <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Lawn Cutting" class="labelMarginLeft" /> Lawn Cutting <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Sodding" class="labelMarginLeft" /> Sodding <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Landscaping" class="labelMarginLeft" /> Landscaping <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Garden Installation" class="labelMarginLeft" /> Garden Installation <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Grub / Leather Jacket Control" class="labelMarginLeft" /> Grub / Leather Jacket Control <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Mulch" class="labelMarginLeft" /> Mulch <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Topdressing" class="labelMarginLeft" /> Topdressing <br /><input type="checkbox" name="cd031bd0-0fef-4c89-9c82-0a6ed9e00443" value="Additional Services" class="labelMarginLeft" /> Additional Services <br /></td></tr><tr ><td class="formLeftColumnContent"><label class="formLabelClass labelMarginLeft">Additional Comments</label><br /><textarea name="eec8e3cb-8025-44b4-9657-1d268a62b38c" maxlength="255"style="resize:none; width:70%; margin-left:10px; height: 65px;" ></textarea></td></tr><tr class="trFormFooterClass"><td class="formLeftFooterClassBottom"><div id="BackFormSubmitButtonDomID" class="sabutton" onclick="Validate()" >Submit</div></td></tr></table></form></div></div><script type="text/javascript">function RemoveClass(elem, name) {
elem.className = elem.className.replace(name, '');
}

function AddClass(elem, name) {
if (elem.className.indexOf(name) == -1) {
elem.className += (' ' + name);
}
}

function MarkInvalidElement(el) {
RemoveClass(el, "requiredInput");
AddClass(el, "requiredRedInput");
el.onkeydown = function () {
RemoveClass(el, "requiredRedInput");
AddClass(el, "requiredInput");
};
}

function Validate() {
var IsValidated = true;
var Found = false;

/* email */
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var fe5dbc5f3ba0049c8b82badaef8afbc1cEl = document.getElementsByName('e5dbc5f3-ba00-49c8-b82b-adaef8afbc1c')[0];
var fe5dbc5f3ba0049c8b82badaef8afbc1cVal = fe5dbc5f3ba0049c8b82badaef8afbc1cEl.value;
if (fe5dbc5f3ba0049c8b82badaef8afbc1cVal == "" || re.test(fe5dbc5f3ba0049c8b82badaef8afbc1cVal) != true) {
IsValidated = false;
MarkInvalidElement(fe5dbc5f3ba0049c8b82badaef8afbc1cEl);
}/* required validation */
var fe7190e03620148f698c1b93e7fb4921d_FirstEl = document.getElementsByName('e7190e03-6201-48f6-98c1-b93e7fb4921d_First')[0];
var fe7190e03620148f698c1b93e7fb4921d_FirstVal = fe7190e03620148f698c1b93e7fb4921d_FirstEl.value.trim();
if (fe7190e03620148f698c1b93e7fb4921d_FirstVal == "") {
IsValidated = false;
MarkInvalidElement(fe7190e03620148f698c1b93e7fb4921d_FirstEl);
}/* required validation */
var fe7190e03620148f698c1b93e7fb4921d_LastEl = document.getElementsByName('e7190e03-6201-48f6-98c1-b93e7fb4921d_Last')[0];
var fe7190e03620148f698c1b93e7fb4921d_LastVal = fe7190e03620148f698c1b93e7fb4921d_LastEl.value.trim();
if (fe7190e03620148f698c1b93e7fb4921d_LastVal == "") {
IsValidated = false;
MarkInvalidElement(fe7190e03620148f698c1b93e7fb4921d_LastEl);
}/* required validation */
var f91d2fc35a8394797a1b868c885320d07_AddressEl = document.getElementsByName('91d2fc35-a839-4797-a1b8-68c885320d07_Address')[0];
var f91d2fc35a8394797a1b868c885320d07_AddressVal = f91d2fc35a8394797a1b868c885320d07_AddressEl.value.trim();
if (f91d2fc35a8394797a1b868c885320d07_AddressVal == "") {
IsValidated = false;
MarkInvalidElement(f91d2fc35a8394797a1b868c885320d07_AddressEl);
}/* required validation */
var f91d2fc35a8394797a1b868c885320d07_CityEl = document.getElementsByName('91d2fc35-a839-4797-a1b8-68c885320d07_City')[0];
var f91d2fc35a8394797a1b868c885320d07_CityVal = f91d2fc35a8394797a1b868c885320d07_CityEl.value.trim();
if (f91d2fc35a8394797a1b868c885320d07_CityVal == "") {
IsValidated = false;
MarkInvalidElement(f91d2fc35a8394797a1b868c885320d07_CityEl);
}/* required validation */
var f91d2fc35a8394797a1b868c885320d07_StateEl = document.getElementsByName('91d2fc35-a839-4797-a1b8-68c885320d07_State')[0];
var f91d2fc35a8394797a1b868c885320d07_StateVal = f91d2fc35a8394797a1b868c885320d07_StateEl.value.trim();
if (f91d2fc35a8394797a1b868c885320d07_StateVal == "") {
IsValidated = false;
MarkInvalidElement(f91d2fc35a8394797a1b868c885320d07_StateEl);
}/* required validation */
var f91d2fc35a8394797a1b868c885320d07_ZipEl = document.getElementsByName('91d2fc35-a839-4797-a1b8-68c885320d07_Zip')[0];
var f91d2fc35a8394797a1b868c885320d07_ZipVal = f91d2fc35a8394797a1b868c885320d07_ZipEl.value.trim();
if (f91d2fc35a8394797a1b868c885320d07_ZipVal == "") {
IsValidated = false;
MarkInvalidElement(f91d2fc35a8394797a1b868c885320d07_ZipEl);
}

if (IsValidated == true) {
document.getElementById("BacktellForm0231943").submit();
} else {
alert("Please fill out all required fields.");

}
}

function CreateEntity() {
document.getElementById("submitButtonText").value = "create";
Validate();
}</script><style type="text/css">.formTableClass {width:98%;border-spacing: 0;}.formHeaderClass {background-color: #F0FFE8;border-top-left-radius:25px;border-top-right-radius:25px;border: 1px solid #CCCCCC;width: 97.6%;}.formLabelClass {font-size:14px;font-weight:bold;padding:0 0 3px 0;display: inline-block;margin-left:10px;}.formHeaderTitleText {font-family:Arial;font-size:x-large;padding-left: 15px;padding-top: 10px;color:#000000;}.formHeaderDescriptionText {font-family:Arial;font-size:large;padding-left: 15px;padding-bottom: 10px;color:#000000;}.formLeftColumnContent {border-right: 1px solid #CCCCCC;vertical-align:top;border-left: 1px solid #CCCCCC;padding-bottom:20px;background-color:#FCFCFC;}.formRightColumnContent {width:48%;vertical-align:top;border-right: 1px solid #CCCCCC;padding-bottom:20px;background-color:#FCFCFC;}.formHelpTextDisplay {margin:5px 15px 0 0;width:80%;padding:8px 10px 10px 8px;border:1px solid #2F8203;float:right;font-size:14px;background-color:#EFFDE6;}.requiredInput {border: 2px groove #2F8203;}.labelMarginLeft {margin-left:10px;}.requiredRedInput {background-color: #FFD9DA;border: 1px solid Red;}.trFormFooterClass {background-color:#D9F5D4;}.formLeftFooterClassTop {width:50%;vertical-align:top;padding-bottom:20px;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;}.formLeftFooterClassBottom {width:50%;vertical-align:top;padding-bottom:20px;border-left: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;border-bottom-left-radius: 25px;padding-top: 20px;border-right: 1px solid #CCCCCC;border-bottom-right-radius: 25px;}.formRightFooterClassBottom {width:50%;vertical-align:top;padding-bottom:20px;padding-top: 20px;border-right: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;border-bottom-right-radius: 25px;}.saButton {margin: 0 10px 0 16px;color: #fff;text-decoration: none;font-weight: bold;font-family: "Segoe UI", Arial, Times New Roman;display: inline-block;float: none;padding: 0 19px;border-radius: 5px;font-size: 16px;height: 40px;line-height: 38px;background-color: #4FD404;border: 1px solid #EFFDE6;text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);cursor: pointer;}.sabutton:hover {background-color: #2F8203;color: #fff;}.backtellActionButton {margin: 0 0 0 6px;color: #fff;text-decoration: none;font-weight: bold;font-family: "Segoe UI", Arial, Times New Roman;display: inline-block;float: none;border-radius: 5px;font-size: 12px;height: 20px;line-height: 19px;padding: 5px 15px;background-color: #BCDB77;border: 1px solid #89A07D;box-shadow: 0 1px 0 #89A07D inset;text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);cursor: pointer;}.backtellActionButton:hover {background-color: #472856;color: #fff;}.star-rating {margin-left:10px;white-space:nowrap;display: block;width: 80px;height: 16px;position: relative;background: url(../images/stars.png) 0 -17px repeat-x;}.star-rating i {opacity: 0;position: absolute;left: 0;top: 0;height: 100%;width: 20%;z-index: 1;background: url(../images/stars.png) 0 0px repeat-x;}.star-rating input {-moz-appearance: none;-webkit-appearance: none;opacity: 0;display: inline-block;width: 20%;height: 100%;margin: 0;padding: 0;z-index: 2;position: relative;}.star-rating input:hover + i,.star-rating input:checked +i { opacity: 1; }.star-rating i ~i { width: 40%; }.star-rating i ~i ~i { width: 60%; }.star-rating i ~i ~i ~i { width: 80%; }.star-rating i ~i ~i ~i ~i { width: 100%; }</style>

[pandy]

Those form controls don't have the requiredInput class.