/    Sign up×
Community /Pin to ProfileBookmark

Validating certain Form fields

Hi there

I’m not a programmer but am faced with the task of trying to write a script which will check certain fields of a form, depending on which value has been selected from a drop down box. I have found many scripts that will check each field of a form but am unsure how to alter it to meet the needs of the form I’m working on.

Can anyone help?

Cheers ?

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@cyber1Sep 01.2005 — Can you post a link or some code?

-Bill
Copy linkTweet thisAlerts:
@nzcloverauthorSep 01.2005 — Well, this is the code that I'm trying to adapt that someone used for the last form.

//formCheck use for mandatory field control

function formCheck(formobj){

// Enter name of mandatory fields

var fieldRequired = Array("A_Question1", "B_Question2", "C_Question3", "D_Question4", "E_Question5", "F_Question6", "G_Question7", "H_Question8", "I_Question9", "J_Question10");

// Enter field description to appear in the dialog box

var fieldDescription = Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");

// dialog message

var alertMsg = "Please complete the following questions:n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "n";
}
}
}
}

if (alertMsg.length == l_Msg){
//alert("Just between the two of us, form submitted!")
return true;
}else{
alert(alertMsg);
return false;
}

}
Copy linkTweet thisAlerts:
@cyber1Sep 01.2005 — So all you need is to check what values are selected in a select box that is set to 'multiple'?

All this other code is for other fields and don't need, or do you?

-Bill
Copy linkTweet thisAlerts:
@nzcloverauthorSep 01.2005 — I don't really know! We used that code to check all questions in a test were answered before it was submitted. This form is slightly different in that they make a selection at the top and then fill in a certain part of the form depending on their selection. I'm not a programmer, just a hack other peoples programs to bits kind of girl so I'm a bit lost here.
Copy linkTweet thisAlerts:
@cyber1Sep 01.2005 — It would make it a lot easier if you could post the whole page or a link to it.

-Bill
Copy linkTweet thisAlerts:
@nzcloverauthorSep 01.2005 — <style type="text/css">

<!--

.style1 {

font-size: 24px;

font-weight: bold;

}

-->

</style>

<p><span class="style1">Direct Enquiry</span></p>

<FORM name=directenquiry onsubmit="return formCheck(this);" action='/intranet/cda/processFormSubmission/0,1533,44828,00.html' method=post >

<TABLE borderColor=#66cc00 cellSpacing=0 cellPadding=10 width=600 align=left bgColor=#ffffff border=10>

<TBODY>

<TR>

<TD height="58" colSpan=2>

<TABLE width=600 border=1 cellPadding=5 cellSpacing=0 bordercolor="#66cc00" bgColor=#ffffff>

<TBODY>

<TR>

<TD width="296">Please select the reason for your request:

</TD>

<TD width="278">

<P align=left><SELECT id=firstChoice style="FONT-SIZE: 10px" onchange="selectChange(this, directenquiry.secondChoice, arrItems1, arrItemsGrp1);" name=A_RequestType> <OPTION value="[SELECT REASON]" selected>[SELECT REASON]</OPTION> <OPTION value="ProofOfPurchase" >Proof of Purchase</OPTION> <OPTION value="Cancellation">Cancellation of Delivery</OPTION><OPTION value="CourierPostInvestigation" >Courierpost Investigation</OPTION><OPTION value="MissingPartsDelivery" >Missing Parts from Delivery</OPTION><OPTION value="MissingGoods" >Missing Promotional Goods</OPTION><OPTION value="ChangeAddress" >Change of Address</OPTION><OPTION value="DispatchConfirmation" >Dispatch Confirmation</OPTION></SELECT></P></TD></TR>

<TR>

<TD>Your Email Address: </TD>

<TD><input name="B_Email Address" type="text" value="" size="50"></TD>

</TR>

</TBODY></TABLE></TD>

</TR>

<TR>

<TD colSpan=2> <p><strong>Proof of Purchase </strong></p>

<TABLE width=600 border=1 cellPadding=5 cellSpacing=0 bordercolor="#66cc00" bgColor=#ffffff>

<TBODY>

<TR>

<TD width="189">ESN Number:</TD>

<TD width="385" colSpan=8>

<input name="C_EsnNumber" type="text" value="" size="50" maxlength="11"></TD>

</TR>

<TR>
<TD width="189"><P align="top"> Email Address / Fax Number or Postal Address :</P>
<P align="top">&nbsp;</P>
</TD>
<TD colSpan=8><textarea name="D_ContactAddress" cols="50"></textarea></TD>
</TR>
</TBODY>

</TABLE> <p>&nbsp;</p></TD>

</TR>

<TR>

<TD colSpan=2><p><strong>Cancellation of Order </strong></p>

<TABLE width=600 border=1 cellPadding=5 cellSpacing=0 bordercolor="#66cc00" bgColor=#ffffff>

<TBODY>

<TR>

<TD width="189">Mobile Number:</TD>

<TD width="411"><input name="E_MobileNumber" type="text" value="" size="50" maxlength="10"></TD>

</TR>

<TR>

<TD width="189">S/O Number:</TD>

<TD colSpan=8><input name="F_ServiceOrderNumber" type="text" value="" size="50"></TD>

</TR>

<TR>

<TD>Stage S/O is in:</TD>

<TD colSpan=8><SELECT id=select2 style="FONT-SIZE: 10px" onchange="selectChange(this, directenquiry.secondChoice, arrItems1, arrItemsGrp1);" name="G_StageOrderIn">

<OPTION value="[SELECT STAGE]" selected>[SELECT STAGE]</OPTION>

<OPTION value="LX" >LX</OPTION>

<OPTION value="L6">L6</OPTION>

<OPTION value="L5" >L5</OPTION>

<OPTION value="RM" >RM</OPTION>

<OPTION value="RN" >RN</OPTION>

</SELECT></TD>

</TR>

<TR>

<TD width="189"><P align="top">Delivery address:</P></TD>

<TD colSpan=8><textarea name="H_DeliveryAddress" cols="50"></textarea></TD>

</TR>

</TBODY>

</TABLE>


<p>&nbsp;</p></TD>

</TR>

<TR>

<TD colSpan=2><p><strong>CourierPost Investigation </strong></p>

<TABLE width=600 border=1 cellPadding=5 cellSpacing=0 bordercolor="#66cc00" bgColor=#ffffff>

<TBODY>

<TR>

<TD width="189">Reason for Investigation :</TD>

<TD colSpan=8>

<SELECT id=select style="FONT-SIZE: 10px" onchange="selectChange(this, directenquiry.secondChoice, arrItems1, arrItemsGrp1);" name="I_Reason">

<OPTION value="[SELECT REASON]" selected>[SELECT REASON]</OPTION>

<OPTION value="LostHandset" >Lost Handset</OPTION>

<OPTION value="HandsetDeliveredNotReceived ">Handset Delivered but not received</option>

</SELECT></TD>

</TR>

<TR>

<TD width="189">Mobile Number:</TD>

<TD width="411"><input name="J_MobileNumber" type="text" value="" size="50" maxlength="10"></TD>

</TR>

<TR>

<TD>ESN Number: </TD>

<TD colSpan=8><input name="K_EsnNumber" type="text" value="" size="50" maxlength="11"></TD>

</TR>

<TR>

<TD width="189">S/O Number:</TD>

<TD colSpan=8><input name="L_ServiceOrderNumber" type="text" value="" size="50"></TD>

</TR>

<TR>

<TD width="189"><P align="top">Delivery / Pick up address:</P></TD>

<TD colSpan=8><textarea name="M_DeliveryAddress" cols="50"></textarea></TD>

</TR>

</TBODY>

</TABLE>


<p>&nbsp;</p></TD>

</TR>

<TR valign="top">

<TD colSpan=2><p><strong>Missing Parts from Delivery e.g. battery, charger </strong></p>

<table width=600 border=1 cellpadding=5 cellspacing=0 bordercolor="#66cc00" bgcolor=#ffffff>

<tbody>

<tr>

<td width="189">Customer Name:</td>

<td colspan=8>

<input name="N_CustomerName" type="text" value="" size="50"></td>

</tr>

<tr>

<td width="189">S/O Number:</td>

<td width="411"><input name="O_ServiceOrderNumber" type="text" value="" size="50"></td>

</tr>

<tr>

<td width="189">ESN Number: </td>

<td colspan=8><input name="P_EsnNumber" type="text" value="" size="50" maxlength="11"></td>

</tr>

</tbody>

</table>


<br></TD>

</TR>

<TR>

<TD colSpan=2><p><strong>Missing Promotional Goods </strong></p>

<table width=600 border=1 cellpadding=5 cellspacing=0 bordercolor="#66cc00" bgcolor=#ffffff>

<tbody>

<tr>

<td width="189">Customer Name:</td>

<td colspan=8>

<input name="Q_CustomerName" type="text" value="" size="50"></td>

</tr>

<tr>

<td width="189">S/O Number:</td>

<td width="411"><input name="R_ServiceOrderNumber" type="text" value="" size="50"></td>

</tr>

<tr>

<td width="189">ESN Number: </td>

<td colspan=8><input name="S_EsnNumber" type="text" value="" size="50" maxlength="11"></td>

</tr>

<tr>

<td width="189"><p align="top">Promotion SPOT code :</p></td>

<td colspan=8><input name="T_SpotCode" type="text" value="" size="50"></td>

</tr>

</tbody>

</table> <p>&nbsp;</p></TD>

</TR>

<TR>

<TD colSpan=2><p><strong>Change of Delivery Address </strong></p>

<TABLE width=600 border=1 cellPadding=5 cellSpacing=0 bordercolor="#66cc00" bgColor=#ffffff>

<TBODY>

<TR>

<TD width="189">Customer Name:</TD>

<TD width="411">

<input name="U_CustomerName" type="text" value="" size="50"></TD>

</TR>

<TR>

<TD width="189">S/O Number:</TD>

<TD width="411"><input name="V_ServiceOrderNumber" type="text" value="" size="50"></TD>

</TR>

<TR>

<TD>Stage S/O is in: </TD>

<TD><input name="W_ServiceOrderNumber" type="text" value="" size="50"></TD>

</TR>

<TR>

<TD width="189"><P align="top">Delivery address:</P>

<P align="top">&nbsp;</P></TD>

<TD width="411"><textarea name="X_DeliveryAddress" cols="50"></textarea></TD>

</TR>

</TBODY>

</TABLE>


<p>&nbsp;</p></TD>

</TR>

<TR>

<TD colSpan=2><p align="top"><strong>Confirmation Handset has been dispatched </strong></p>

<table width=600 border=1 cellpadding=5 cellspacing=0 bordercolor="#66cc00" bgcolor=#ffffff>

<tbody>

<tr>
<td>S/O Number:</td>
<td><input name="Y_ServiceOrderNumber" type="text" value="" size="50"></td>
</tr>
<tr>
<td width="189">Stage S/O is in: </td>
<td width="411"><input name="Z_ServiceOrderNumber" type="text" value="" size="50"></td>
</tr>
</tbody>

</table> </TD>

</TR>

<!-- Submission and Reset Buttons -->

<TR>

<TD>

<P align=right><INPUT type=submit value=Submit name="Submit Form">

&nbsp;</P></TD>

<TD>&nbsp;<INPUT type=reset value=Reset name=Reset></TD></TR></TBODY></TABLE>

</FORM><!-- End of Direct Enquiry Form -->
Copy linkTweet thisAlerts:
@cyber1Sep 02.2005 — nzclover-

I was able to get it to validate the text fields but the selects no.

Maybe someone else wants to take stab at it.

I have attached the file.

A question. Do you have the orignal code that goes with form?

-Bill

[upl-file uuid=fec65a2e-bda9-4227-8d0e-fc7f28f7bd7a size=10kB]testJS_validateform.txt[/upl-file]
Copy linkTweet thisAlerts:
@nzcloverauthorSep 02.2005 — Thank you so much for that. I'll have a go at putting it all together online.

What original code do you mean?
Copy linkTweet thisAlerts:
@cyber1Sep 02.2005 — 
What original code do you mean?[/QUOTE]


I'm sorry I should have said the original javascript validation code.

Or are saying the form/HTML came from one place and then the Javascript to do the valitdation from somewhere else..

-Bill
Copy linkTweet thisAlerts:
@nzcloverauthorSep 02.2005 — We reference the javascript somewhere else....don't have the function etc loaded into the form page. I had made a few adjustments to the form so am adjusting your code and hoping I can get it to work!
Copy linkTweet thisAlerts:
@torunforeverSep 02.2005 — nzclover, how do you expect to complete a project when you don't even know the requirements?

I looked at the page, and you were right in the first place. The user selects a reason for their request, and your goal would be to validate only the section that corresponds to the selected option.

You might want to consider a more robust interface, so the user isn't confronted with unnecessary fields. Make a selection, and the appropriate fields are loaded. You can do that with server-side code or with javascript.

edit:

If you're going to work with your current setup, I'd recommend not doing a switch not on every form element, but on the selected option. Let me know if I'm correct that you only need to validate the corresponding section to the selected value.
Copy linkTweet thisAlerts:
@nzcloverauthorSep 02.2005 — I know the requirements for the project so am unsure why you asked that question.

Yes I do only need to validate the corresponding section to the selected value. Did I not make that clear?
Copy linkTweet thisAlerts:
@torunforeverSep 02.2005 — nzclover, I question your requirements, because cyber1 asked you a question about what needs to be validated, and you responded "I don't really know!"

The code you currently have loops through formobj.elements, and will validate more than just the corresponding section. Is that right or not?

If that's wrong, I figure you have two options.

  • 1. Put in some sort of grouping in the field names, so you can still use formobj.elements and just look for the common grouping name.


  • 2. Hardcode the validation using a switch statement.


  • I put together a starting point for how I'd do the switch statement. It's just a stub, so you'd need to fill in the validation. I did some simple validation for "Proof of Purchase" to get you started, plus I included the validation for the select element in "Cancellation of Order"

    <i>
    </i>function formCheck(formobj){

    <i> </i>var selectObject = document.getElementById('firstChoice');

    <i> </i>if (selectObject.selectedIndex &lt;= 0) {
    <i> </i> alert('Select the reason for your request');
    <i> </i> return false;
    <i> </i>}

    <i> </i>var alertMsg = '';

    <i> </i>switch (selectObject.selectedIndex) {
    <i> </i> case 1:
    <i> </i> if (formobj.elements['C_EsnNumber'].value.length == 0) {
    <i> </i> alertMsg += '[in proof: C_EsnNumber]n';
    <i> </i> }
    <i> </i> if (formobj.elements['D_ContactAddress'].value.length == 0) {
    <i> </i> alertMsg += '[in proof: D_ContactAddress]n';
    <i> </i> }
    <i> </i> break;
    <i> </i> case 2:
    <i> </i> if (formobj.elements['G_StageOrderIn'].selectedIndex &lt;= 0) {
    <i> </i> alertMsg += '[in cancellation of order: G_StageOrderIn]n';
    <i> </i> }

    <i> </i> // need to check the other fields
    <i> </i> // same goes for other cases

    <i> </i> break;
    <i> </i> case 3:
    <i> </i> alertMsg = 'in courierpost';
    <i> </i> break;
    <i> </i> case 4:
    <i> </i> alertMsg = 'in missing parts';
    <i> </i> break;
    <i> </i> case 5:
    <i> </i> alertMsg = 'in missing promotional goods';
    <i> </i> break;
    <i> </i> case 6:
    <i> </i> alertMsg = 'in change of address';
    <i> </i> break;
    <i> </i> case 7:
    <i> </i> alertMsg = 'in dispatch confirmation';
    <i> </i> break;
    <i> </i>}

    <i> </i>if (alertMsg.length &gt; 0) {
    <i> </i> alert(alertMsg);
    <i> </i> return false;
    <i> </i>}
    }
    Copy linkTweet thisAlerts:
    @nzcloverauthorSep 02.2005 — Thank you for your help. My response that I didn't know was because I didn't understand the question.

    I'm in NZ and it's late on a Friday afternoon....it's time for a drink. I'll get back to this on Monday!
    ×

    Success!

    Help @nzclover spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...