burntcaramel/穿孔

使用关联数组或JSON构建,简单而强大的表单,具有自动服务器验证、依赖项等功能。

1.5.3 2014-07-21 04:05 UTC

This package is not auto-updated.

Last update: 2024-09-24 07:30:35 UTC


README

Perforated表单易于创建、读取和稍后修改。使用基于键的数组,在PHP或JSON中定义表单的结构。

轻松编辑。

易于理解的语法意味着您可以快速在几分钟内创建表单。使用HTML5输入类型,如URL、电子邮件地址、数字和复选框。它们在服务器上自动验证,无需额外代码。

稍后返回并添加、编辑、删除。添加新条目只需添加几行简单代码。语法非常简单,您甚至可以定义JSON文件中的表单。

合理设计样式。

Perforated旨在智能。它将相关条目组合在<fieldset>元素中。条目自动创建关联的<label>。这意味着它很容易用CSS进行样式设计。针对特定的表单条目。针对特定类型的所有条目。

扩展。

Perforated将自动显示输入字段错误的类型特定错误。轻松扩展此验证。添加您自己的错误消息。

表单处理和验证完全独立于表单显示,因此可以扩展或替换验证或显示方式。

自动命名空间。

提交的表单有自己的命名空间,例如$_POST['formID']。这意味着它不会与其他POST变量冲突,因此可以在WordPress中使用name字段而无需担心:[http://stackoverflow.com/questions/15810948/post-returns-empty-on-form-submit-in-wordpress](http://stackoverflow.com/questions/15810948/post-returns-empty-on-form-submit-in-wordpress)

使部分依赖于您想要的任何内容。

部分可以设置为仅当复选框处于开启状态时显示。只需声明您想要的,无需额外JS。

可以使用外部值来自动填充条目或用于依赖项来打开和关闭部分,只需使用简单的回调即可。例如,如果用户已登录,则仅显示和使用表单的特定部分,无需复杂的if语句。

示例

define ('EXAMPLE_SUBMIT_VIDEO', 'submitVideo');
define ('BURNT_ENDASH', "\xE2\x80\x93");

// This can be written using PHP arrays, or loaded from a JSON file.
$formOptions = array(
	'baseID' => EXAMPLE_SUBMIT_VIDEO,
	// All the entries to be used in the form.
	'entries' => array(
		'videoLink' => array(
			'title' => 'Video link '.BURNT_ENDASH.' Vimeo / YouTube',
			'value' => '',
			'type' => 'url',
			'required' => true
		),
		'story' => array(
			'title' => 'Video details & story', // Don't need to worry about escaping HTML first.
			'value' => '',
			'type' => 'text',
			'multipleLines' => true,
			'required' => true
		),
		'name' => array(
			'title' => 'Your name',
			'value' => '',
			'type' => 'text',
			'required' => true
		),
		'email' => array(
			'title' => 'Your email',
			'value' => '',
			'type' => 'email',
			'required' => true
		),
		'helpedCreate' => array(
			'title' => 'Were you a part of this video?',
			'value' => false,
			'type' => 'checkbox',
			'titleWhenOff' => 'No',
			'titleWhenOn' => 'Yes'
		),
		'role' => array(
			'title' => 'What was your role?',
			'value' => '',
			'type' => 'text',
			'required' => true
		),
		'location' => array(
			'title' => 'Where are you located? (city & country)',
			'value' => '',
			'type' => 'text'
		),
		'companies' => array(
			'title' => 'Who are the companies and teams behind the video?',
			'value' => '',
			'type' => 'text',
			'multipleLines' => true
		),
		'businessEmail' => array(
			'title' => 'Is there an email we can contact for business enquiries?',
			'value' => '',
			'type' => 'email'
		)
	),
	// This is the actual structure of the form as it is displayed, grouped into subsections.
	'structure' => array(
		array(
			'id' => 'videoInfo',
			'entries' => array('videoLink')
		),
		array(
			'id' => 'aboutSubmitter',
			'dependentOn' => 'loggedOut', // Only uses (shows and processes) this if the 'loggedOut' external value is on.
			'alsoProcessIf' => 'loggedIn', // These entries are automatically filled (see 'automaticallyFillEntriesFrom' further down) so process them even if its dependency is off.
			'entries' => array('name', 'email')
		),
		array(
			'id' => 'connectionQuestion',
			'entries' => array('helpedCreate')
		),
		array(
			'id' => 'connection',
			'dependentOn' => 'helpedCreate', // Only show this if the 'helpedCreate' checkbox is on.
			'entries' => array('role', 'location', 'companies', 'businessEmail')
		)
	),
	// Automatically uses external values to fill in entries.
	'automaticallyFillEntriesFrom' => array(
		// Using external value 'loggedInMember', grab the following values:
		'loggedInMember' => array(
			'name' => 'name', // Entry value for 'name' is automatically filled from $externalValues['loggedInMember']['name']
			'email' => 'emailAddress', // Entry value for 'email' is automatically filled from $externalValues['loggedInMember'][emailAddress]
		)
	)
);

使用服务器的外部值

function exampleExternalValues()
{
	$loggedInMemberInfo = exampleLoggedInMemberInfo();
	$specialValues = array(
		'loggedIn' => !empty($loggedInMemberInfo),
		'loggedOut' => empty($loggedInMemberInfo),
		'loggedInMember' => $loggedInMemberInfo
	);
	return $specialValues;
}

验证和加工

// Check if form is being submitted and if so, process the submitted entries.
$resultsForSubmitVideo = perforatedFormCheckAndProcess($formOptions, array(
	'externalValues' => 'exampleExternalValues' // Options and callbacks are kept separate to enabled $formOptions to be created as pure JSON.
));

处理提交的结果

?>
<div id="content">
<h1>Video Submissions</h1>
<?php

// Check if the form is being submitted, and that the entries are valid.
if ($resultsForSubmitVideo['isBeingSubmitted'] && $resultsForSubmitVideo['entriesAreValid']):
	$processedEntries = $resultsForSubmitVideo['entries']; // Overwrites the entries field in the options array, meaning the result itself can be used as an options array with values already set.
	
	/*
	
	Grab the values from the processed entries, and do something with them.
		$videoLink = $processedEntries['videoLink']['value']
		$name = $processedEntries['name']['value']
		$validEmail = $processedEntries['email']['value']
	
	Using checkboxes:
		$helpedCreate = !empty($processedEntries['helpedCreate']['value']);
	
	*/
?>
<div id="thanks">
<h3>Thanks <?= glazeText($processedEntries['name']['value']) ?> for submitting your video!</h3>
</div>

显示表单

<?php
else:
	// Display the form, which does a POST request to the current page.
	// If $resultsForSubmitVideo['entriesAreValid'] is false, then the errors will be displayed within the form.
?>
<form id="submitVideoForm" class="perforatedForm" action="" method="post" novalidate>
<?php
	perforatedFormDisplayEntries($resultsForSubmitVideo);
?>

<input type="submit" value="Submit Video">
</form>
<?php
endif;
?>
</div>
<?php

待办事项

  • 客户端JavaScript验证,可能需要与现有项目结合使用,而不是从头开始编写。