X-Cart forums - Required fields

The way to remove required fields from the contact form is to edit the include/help.php file and the skin1/help/contact.tpl file as mentioned in the previous posts.

However, I didn't want to edit the PHP file for fear of upgrade issues/headaches in the future. My method is to do this by adding some Javascript to the contact.tpl file.

The idea is this:

1) remove the asterisks of the fields you don't want required anymore
2) add our own javascript validation function that denies submission of the form if our required fields are not filled in
3) in that same validation function, set the fields that we no longer want required to a non-empty string if the user did not fill it out.

The javascript function looks like this:

Code:

function formSubmit(thisform)

{

        // The fields I want required are: firstname,lastname,email,phone,department,subject,message body

        // Since Department is never empty, we don't check for it.

        // The email validation is also called here to check for good email addresses

        // Note that you can ADD additional fields to be required here if you want!

        if ((thisform.firstname.value == "")||(thisform.lastname.value == "")||(!checkEmailAddress(thisform.email))        || (thisform.phone.value =="")||(thisform.subject.value=="")||(thisform.body.value==""))

        {

                alert ("Please fill out the required fields (denoted by *) before submitting the form!");

                return false;

        }

        else

        {

                // These are the other fields that X-Cart requires.  But, we don't want them to be required.

                // So, if the user did not fill in these fields, we simply set them to " " so that X-Cart won't complain.

                if (thisform.b_address.value == "")

                        thisform.b_address.value = " ";

                if (thisform.b_zipcode.value == "")

                        thisform.b_zipcode.value = " ";

                if (thisform.b_city.value == "")

                        thisform.b_city.value = " ";

                if (thisform.b_address.value == "")

                        thisform.b_address.value = " ";

                return true;

        }

}

We have to change our submit button to call that validation function from:

Code:

{include file="buttons/submit.tpl"}

Code:

{include file="buttons/submit.tpl"}

My complete contact.tpl file looks like this.

Code:

{* $Id: contactus.tpl,v 1.17.2.1 2003/02/11 09:03:02 svowl Exp $ *}

{literal}

<script>

function checkEmailAddress(field) {

var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);



if (goodEmail) {

    return true;

} else {

        alert("E-mail address is invalid! Please correct");

        field.focus();

        field.select();

        return false;

    }

}



function formSubmit(thisform)

{

        // The fields I want required are: firstname,lastname,email,phone,department,subject,message body

        // Since Department is never empty, we don't check for it.

        // The email validation is also called here to check for good email addresses

        // Note that you can ADD additional fields to be required here if you want!

        if ((thisform.firstname.value == "")||(thisform.lastname.value == "")||(!checkEmailAddress(thisform.email))        || (thisform.phone.value =="")||(thisform.subject.value=="")||(thisform.body.value==""))

        {

                alert ("Please fill out the required fields (denoted by *) before submitting the form!");

                return false;

        }

        else

        {

                // These are the other fields that X-Cart requires.  But, we don't want them to be required.

                // So, if the user did not fill in these fields, we simply set them to " " so that X-Cart won't complain.

                if (thisform.b_address.value == "")

                        thisform.b_address.value = " ";

                if (thisform.b_zipcode.value == "")

                        thisform.b_zipcode.value = " ";

                if (thisform.b_city.value == "")

                        thisform.b_city.value = " ";

                if (thisform.b_address.value == "")

                        thisform.b_address.value = " ";

                return true;

        }

}

</script>

{/literal}

{if $smarty.get.mode eq "update"}

{$lng.txt_contact_us_header}

{/if}








{capture name=dialog}

{if $smarty.get.mode eq "update"}

<table width=100% border=0 cellspacing=0 cellpadding=2>

<form action="help.php?section=contactus&mode=update&action=contactus"  method=post name=registerform>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_username}</td>

<td></td>

<td nowrap>

<input type=text name=uname size=32 maxlength=32 value="{$userinfo.login}">

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_title}</td>

<td></td>

<td nowrap>

<select name=title>

{section name=title loop=$name_titles}

<option {if $userinfo.title eq $name_titles[title]}selected{/if}>{$name_titles[title]}</option>

{/section}

</select>

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_first_name}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<input type=text name=firstname size=32 maxlength=32 value="{$userinfo.firstname}">

{if $fillerror ne "" and $userinfo.firstname eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_last_name}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<input type=text name=lastname size=32 maxlength=32 value="{$userinfo.lastname}">

{if $fillerror ne "" and $userinfo.lastname eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_address}</td>

<td></td>

<td nowrap>

<input type=text name=b_address size=32 maxlength=64 value="{$userinfo.b_address}">

{if $fillerror ne "" and $userinfo.b_address eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_zip_code}</td>

<td></td>

<td nowrap>

<input type=text name=b_zipcode size=32 maxlength=32 value="{$userinfo.b_zipcode}">

{if $fillerror ne "" and $userinfo.b_zipcode eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_city}</td>

<td></td>

<td nowrap>

<input type=text name=b_city size=32 maxlength=64 value="{$userinfo.b_city}">

{if $fillerror ne "" and $userinfo.b_city eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_state}</td>

<td></td>

<td nowrap>

{if $states ne ""}

<select name=b_state size=1>

<option value="">{$lng.lbl_select_one}</option>

{section name=state_idx loop=$states}

<option value={$states[state_idx].state_code} {if $userinfo.b_state eq $states[state_idx].state_code}selected{/if}>{$states[state_idx].state}</option>

{/section}

</select>

{else}

<input type=text size=32 name=b_state maxlength=64 value="{$userinfo.b_state}">

{/if}

</td>

</tr>





<tr valign=middle>

<td class=FormButton>{$lng.lbl_country}</td>

<td></td>

<td nowrap>

<select name=b_country>

{section name=country_idx loop=$countries}

<option value={$countries[country_idx].country_code} {if $userinfo.b_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{/if}>{$countries[country_idx].country}</option>

{/section}

</select>

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_phone}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<input type=text name=phone size=32 maxlength=32 value="{$userinfo.phone}">

{if $fillerror ne "" and $userinfo.phone eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_fax}</td>

<td></td>

<td nowrap>

<input type=text name=fax size=32 maxlength=128 value="{$userinfo.fax}"></td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_email}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<input type=text name=email size=32 maxlength=128 value="{$userinfo.email}">

{if $fillerror ne "" and $userinfo.email eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_web_site}</td>

<td></td>

<td nowrap>

<input type=text name=url size=32 maxlength=128 value="{if $userinfo.url eq ""}http://{else}{$userinfo.url}{/if}"></td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_department}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<select name=department>

<option value="All" selected>{$lng.lbl_all}</option>

<option value="Partners">{$lng.lbl_partners}</option>

<option value="Marketing / publicity">{$lng.lbl_marketing_publicity}</option>

<option value="Webdesign">{$lng.lbl_web_design}</option>

<option value="Sales">{$lng.lbl_sales}</option>

</select>

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_subject}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<input type=text name=subject size=32 maxlength=128 value="{$smarty.get.prefill}{$userinfo.subject}">

{if $fillerror ne "" and $userinfo.subject eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td class=FormButton>{$lng.lbl_message}</td>

<td><font class=Star>*</font></td>

<td nowrap>

<textarea cols=48 rows=12 name=body>{$userinfo.body}</textarea>

{if $fillerror ne "" and $userinfo.body eq ""}<font class=Star>&lt;&lt;</font>{/if}

</td>

</tr>



<tr valign=middle>

<td></td>

<td></td>

<td nowrap>






{include file="buttons/submit.tpl"}

</td>

</tr>

<input type=hidden name=usertype value="{$usertype}">

</form>

</table>

{else}

{$lng.txt_contact_us_sent}

{/if}

{/capture}

{include file="dialog.tpl" title=$lng.lbl_contact_us content=$smarty.capture.dialog extra="width=100%"}

Fun, eh?

Gary