how can I make required fields

Forum|Forum|6 years ago
October 9, 2019
4 replies
502 views

ı want to some data input to my programs.But some fıle ,users must enter data.for exp name.how can ı do it wıth coldfusıon code?

Thank u.

This topic has been closed for replies.

WolfShade

Legend

I WANT WHOMEVER KEEPS DELETING MY REPLIES TO KINDLY STOP DOING SO! I am trying to help someone, here.

Sorry for the delay. I ran into some issues coming up with this example. I have two files; formrequiredexample.cfc and formrequiredexample.cfm. First, the .cfm page:

<cfsilent>
	<cfparam name="form.userName" default="" />
	<cfparam name="form.favcolFULL" default="" />
	<cfparam name="form.visitFULL" default="" />
	<cfparam name="form.age" default="" />
	<cfparam name="form.height" default="" />
</cfsilent><!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Required Form Field Example</title>
		<style>
			#thisTable{width: 500px;}
			.leftTD{width: 200px; text-align: right; vertical-align: top;}
			.rightTD{width: 300px; text-align: left; vertical-align: top;}
			input[type='text'], select{ width: 95%; }
		</style>
	</head>
	<body>
	<cfoutput>
		<form id="thisForm" name="thisForm">
			<table id="thisTable">
				<tr>
					<td class="leftTD">Name: *</td>
					<td class="rightTD"><input type="text" id="userName" name="userName" value="#form.userName#" class="include" /></td>
				</tr>
				<tr>
					<td class="leftTD">Favourite Colour:<br />(not required)</td>
					<td class="rightTD">
						<input type="checkbox" id="favcol1" name="favcol" value="Blue"<cfif ListContains(form.favcolFULL,"Blue")> checked</cfif> /> Blue<br />
						<input type="checkbox" id="favcol2" name="favcol" value="Red"<cfif ListContains(form.favcolFULL,"Red")> checked</cfif> /> Red<br />
						<input type="checkbox" id="favcol3" name="favcol" value="Green"<cfif ListContains(form.favcolFULL,"Green")> checked</cfif> /> Green<br />
						<input type="checkbox" id="favcol4" name="favcol" value="Black"<cfif ListContains(form.favcolFULL,"Black")> checked</cfif> /> Black<br />
						<input type="hidden" id="favcolFULL" name="favcolFULL" class="include" value="#form.favcolFULL#" />
					</td>
				</tr>
				<tr>
					<td class="leftTD">I'd like to visit: *</td>
					<td class="rightTD">
						<select id="visit" name="visit" multiple size="5" class="multi">
							<option value="" disabled>Select at least one</option>
							<option value="Canada">Canada</option>
							<option value="USA">USA</option>
							<option value="Japan">Japan</option>
							<option value="Scotland">Scotland</option>
						</select><input type="hidden" id="visitFULL" name="visitFULL" class="include" value="#form.visitFULL#" />
					</td>
				</tr>
				<tr>
					<td class="leftTD">Age: (not required)</td>
					<td class="rightTD"><input type="text" id="age" name="age" class="include" value="#form.age#" /></td>
				</tr>
				<tr>
					<td class="leftTD">Height: (not required)</td>
					<td class="rightTD"><input type="text" id="height" name="height" class="include" value="#form.height#" /></td>
				</tr>
				<tr>
					<td class="leftTD"></td>
					<td class="rightTD"><button type="button" id="submitBtn" name="submitBtn">Submit</button></td>
				</tr>
			</table>
			<div id="rslts"></div>
		</form>
	</cfoutput>
	<script src="js/jq/jquery-1.11.2.min.js"></script>
	<script>var vlu1, vlu2;
		$('[name="visit"]').on('click',function(){
			$thisName = $(this).attr('name'), $thisTarget = $('#'+$thisName+'FULL').attr('name');
			vlu1 = $('[id="'+$thisName+'"]').val().join(',');
			$('[id="'+$thisTarget+'"').val(vlu1);
			});
		$('[name="favcol"]').on('change',function(){ 
			$thisName = $(this).attr('name'), $thisTarget = $('#'+$thisName+'FULL').attr('name');
			vlu2 = $('[name="favcol"]:checked').map(function(){return this.value;}).get();
			$('[id="'+$thisTarget+'"').val(vlu2);
			});
		$('#submitBtn').click(function(){
			var data = $('#thisForm').serializeArray();
			data = JSON.stringify(data);// Converts data to a JSON object then stringifies it.

			$.ajax({
				type: "POST",
				contentType: "application/json",
				url: "formrequiredexample.cfc?method=formTest",
				data: data
				}).done(function(rtn){$('#rslts').html(rtn);});
			});
	</script>
	</body>
</html>

So this uses JavaScript to populate the hidden fields of the checkboxes and the select. If you want to see this in action, you can change the type="hidden" to type="text" and see the fields being populated as you click on checkboxes or choose from the select. The button uses AJaX to serialize the elements, convert to a JSON object, then stringify it. This is then posted to the .cfc function that converts it back into a form object, and you proceed from there.

Here is the .cfc:

<cfcomponent>
	<cffunction name="formTest" access="remote" returntype="string" returnformat="plain">
		<cfset form = {} /> <!--- create a blank form scope and fill it with JSON data --->
		<cfset requestBody = DeserializeJSON(toString(getHttpRequestData().content)) />
		<cfset aryLen = ArrayLen(variables.requestBody) />
		<cfloop index="idx" from="1" to="#val(aryLen)#">
			<cfif isStruct(variables.requestBody[idx])><cfset form[variables.requestBody[idx].name] = variables.requestBody[idx].value /></cfif>
		</cfloop>
		<!---<cfsavecontent variable="f"><cfdump var="#form#" /></cfsavecontent><cfreturn f />--->
		<cfif NOT StructCount(form)><cfreturn "No Form Submitted.. aborting" /></cfif>
		<cfset warn = "" />
		<cfset form.userName = trim(canonicalize(form.userName,true,true)) />
		<cfset form.favcolFULL = trim(canonicalize(form.favcolFULL,true,true)) />
		<cfset form.visitFULL = trim(canonicalize(form.visitFULL,true,true)) />
		<cfset form.age = trim(canonicalize(form.age,true,true)) />
		<cfset form.height = trim(canonicalize(form.height,true,true)) />

		<cfif form.userName eq ""><cfset warn = warn & "Your name is required<br />" /></cfif>
		<cfif form.visitFULL eq ""><cfset warn = warn & "Select at least one place you want to visit<br />" /></cfif>
		<cfif len(form.age) AND val(form.age) eq 0><cfset warn = warn & "Age must be a number greater than zero" /></cfif>

		<cfif len(warn)>
			<cfreturn warn />
		<cfelse>
			<!--- This is where you would place the code for processing the form data.  --->
			<cfreturn "Everything checks out." />
		</cfif>
	</cffunction>
</cfcomponent>

As you can see, it returns either the warning of what needs to be corrected, or a message that states all is good.

HTH,

^ _ ^

WolfShade

Legend

I had a reply here, but the mods labeled it SPAM and removed it. I'm working on something for you. I'll get it here as soon as I can.

Also, this will require jQuery to be loaded somewhere in the document containing the form.

V/r,

^ _ ^

WolfShade

Legend

I am getting the feeling that you are very new to web development. I will try to give an example, but I am at work and have to make this short.

Basically, what I do is prevent the default submit action and use AJaX to submit the form (behind the scenes) to a CFC that contains the function for processing the form data. If you have any elements that can group values (checkbox, select that can have more than one value), you need to create a hidden field for them that will contain all the values because .serializeArray() will only put the last value in (it gets re-written, until the last value).

Give me a few minutes to throw something together and I'll post it here when I'm done.

V/r,

^ _ ^

WolfShade

Legend

Making a form field required is usually done on the client-side (JavaScript), not the server-side (ColdFusion), although you _can_ do some things in ColdFusion to assure that certain fields must be used, as well as format (like phone numbers, etc.)

In the documents that handle processing the form data, you can trim the value of the field to make sure the user didn't just hit the space bar once or twice to bypass length requirements, then check for value length. If it's still zero, you can send back a message that the field is required and stop processing the form data.

HTH,

^ _ ^

nurcanb61753314Author

Inspiring

thank u for u unswer.is there any exp for show it:(

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded