• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

how can I make required fields

Explorer ,
Oct 08, 2019 Oct 08, 2019

Copy link to clipboard

Copied

ı 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.

Views

397

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2019 Oct 09, 2019

Copy link to clipboard

Copied

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,

 

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 09, 2019 Oct 09, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2019 Oct 09, 2019

Copy link to clipboard

Copied

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,

 

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2019 Oct 09, 2019

Copy link to clipboard

Copied

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,

 

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2019 Oct 09, 2019

Copy link to clipboard

Copied

LATEST

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,

 

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation