think49/overlapInputTextValue.html

## overlapInputTextValue.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>テキストボックスの重複チェック</title>
  <style><!--
  /* default */
  body { margin: 0; padding: 1em; }
  h1，h2，h3，h4，h5，h6 { font-weight: bold; color: #202020; }
  h1 { margin: 1em 0; padding: 0; font-size: 150%; }
  h2 { margin: 2.5em 0 1em; padding: 0; font-size: 120%; }
  h3 { margin: 1em 0: padding: 0; font-size: 100%; color: #373; }
  dl { margin: 1em 0; padding: 0; }
  dt { margin: 1.5em 1em 1em; padding: 0; color: #337; font-weight: bold; }
  dd { margin: 1em; padding: 0; }
  dt a { text-decoration: none; color: #337; }
  strong { font-size: 100%; font-weight: bold; }
  em { font-size: 100%; font-weight: normal; font-style: normal; text-decoration: underline; }
  blockquote { margin: 1em 2em; padding: 0.5em 1em; border: dashed 1px orange; }
  cite { font-family: italic; }
  pre { margin: 1.5em 2em; padding: 0.5em; font-family: monospace; font-size: 100%; font-weight: normal; }
  code { font-family: monospace; font-size: 90%; font-weight: normal; }
  hr { margin: 2em 0; padding: 0; }
  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, th code { font-weight: bold; }
  table { border-collapse: collapse; table-layout: auto; margin: 1em 0; padding: 0; border: solid 1px #AAA; color: black; background-color: ghostwhite; }
  thead, tbody { margin: 0; padding: 0; border-style: none; }
  thead th { text-align: center; font-weight: bolder; color: #202020; background-color: lavender; }
  tbody th { text-align: left; font-weight: bolder; color: #202020;  }
  th, td { margin: 0; padding: 0.5em 0.8em; border: solid 1px #AAA; }
  .button { display: inline-block; margin: 2px; padding: 1px; border: outset 2px #E9E9E9; color: black; background-color: #E9E9E9; }

  /* HTML5 */
  mark, .mark { border-bottom: solid 4px #0c0; }
  --></style>

  <script><!--
  // overlapInputTextValue.js

  // ECMAScript 5
  if (typeof Array.prototype.some !== 'function') {
    Array.prototype.some = function(fun, thisp) {
      var i, len;

      if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function');

      for (i = 0, len = this.length; i < len; i++) {
        if (i in this && fun.call(thisp, this[i], i, this)) return true;
      }

      return false;
    };
  }

  function createOverlapInputTextValue (value, i) {
    return function (element, index) {
      return index !== i && element.tagName === 'INPUT' && element.type === 'text' && element.value === value;
    };
  }

  function checkForm (event) {
    var form, elements, i, l;

    form = event.target || event.srcElement;
    elements = form.elements;

    for (i = 0, l = elements.length; i < l; i++) {
      if (Array.prototype.some.call(elements, createOverlapInputTextValue(elements[i].value, i))) {
        alert('There is an overlap in the text box value.');
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        break;
      }
    }
  }
  //--></script>
</head>
<body>

<h1>テキストボックスの重複チェック</h1>

<h2 id="Sample">サンプル</h2>

<form id="TARGET" onsubmit="checkForm(event);">
  <p>test1 <input type="text" name="test1" value="" tabindex="1" /></p>
  <p>test2 <input type="text" name="test2" value="" tabindex="2" /></p>
  <p>test3 <input type="text" name="test3" value="" tabindex="3" /></p>
  <p><input type="submit" value="submit" tabindex="4" /></p>
</form>

<h2 id="ReferenceURL">参考URL</h2>

<dl>
  <dt>ECMAScript 5</dt>
  <dd>
    <ul>
      <li><a href="http://ecma262-5.com/ELS5_Section_15.htm#Section_15.4.4.17">15.4.4.17   Array.prototype.some ( callbackfn [ , thisArg ] ) - ECMAScript 5</a></li>
    </ul>
  </dd>
  <dt>MDC</dt>
  <dd>
    <ul>
      <li><a href="https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/some">some - MDC</a></li>
    </ul>
  </dd>
</dl>

</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>テキストボックスの重複チェック</title>
	<style><!--
	/* default */
	body { margin: 0; padding: 1em; }
	h1，h2，h3，h4，h5，h6 { font-weight: bold; color: #202020; }
	h1 { margin: 1em 0; padding: 0; font-size: 150%; }
	h2 { margin: 2.5em 0 1em; padding: 0; font-size: 120%; }
	h3 { margin: 1em 0: padding: 0; font-size: 100%; color: #373; }
	dl { margin: 1em 0; padding: 0; }
	dt { margin: 1.5em 1em 1em; padding: 0; color: #337; font-weight: bold; }
	dd { margin: 1em; padding: 0; }
	dt a { text-decoration: none; color: #337; }
	strong { font-size: 100%; font-weight: bold; }
	em { font-size: 100%; font-weight: normal; font-style: normal; text-decoration: underline; }
	blockquote { margin: 1em 2em; padding: 0.5em 1em; border: dashed 1px orange; }
	cite { font-family: italic; }
	pre { margin: 1.5em 2em; padding: 0.5em; font-family: monospace; font-size: 100%; font-weight: normal; }
	code { font-family: monospace; font-size: 90%; font-weight: normal; }
	hr { margin: 2em 0; padding: 0; }
	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, th code { font-weight: bold; }
	table { border-collapse: collapse; table-layout: auto; margin: 1em 0; padding: 0; border: solid 1px #AAA; color: black; background-color: ghostwhite; }
	thead, tbody { margin: 0; padding: 0; border-style: none; }
	thead th { text-align: center; font-weight: bolder; color: #202020; background-color: lavender; }
	tbody th { text-align: left; font-weight: bolder; color: #202020; }
	th, td { margin: 0; padding: 0.5em 0.8em; border: solid 1px #AAA; }
	.button { display: inline-block; margin: 2px; padding: 1px; border: outset 2px #E9E9E9; color: black; background-color: #E9E9E9; }

	/* HTML5 */
	mark, .mark { border-bottom: solid 4px #0c0; }
	--></style>

	<script><!--
	// overlapInputTextValue.js

	// ECMAScript 5
	if (typeof Array.prototype.some !== 'function') {
	Array.prototype.some = function(fun, thisp) {
	var i, len;

	if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function');

	for (i = 0, len = this.length; i < len; i++) {
	if (i in this && fun.call(thisp, this[i], i, this)) return true;
	}

	return false;
	};
	}

	function createOverlapInputTextValue (value, i) {
	return function (element, index) {
	return index !== i && element.tagName === 'INPUT' && element.type === 'text' && element.value === value;
	};
	}

	function checkForm (event) {
	var form, elements, i, l;

	form = event.target \|\| event.srcElement;
	elements = form.elements;

	for (i = 0, l = elements.length; i < l; i++) {
	if (Array.prototype.some.call(elements, createOverlapInputTextValue(elements[i].value, i))) {
	alert('There is an overlap in the text box value.');
	event.preventDefault ? event.preventDefault() : event.returnValue = false;
	break;
	}
	}
	}
	//--></script>
	</head>
	<body>

	<h1>テキストボックスの重複チェック</h1>

	<h2 id="Sample">サンプル</h2>

	<form id="TARGET" onsubmit="checkForm(event);">
	<p>test1 <input type="text" name="test1" value="" tabindex="1" /></p>
	<p>test2 <input type="text" name="test2" value="" tabindex="2" /></p>
	<p>test3 <input type="text" name="test3" value="" tabindex="3" /></p>
	<p><input type="submit" value="submit" tabindex="4" /></p>
	</form>

	<h2 id="ReferenceURL">参考URL</h2>

	<dl>
	<dt>ECMAScript 5</dt>
	<dd>
	<ul>
	<li><a href="http://ecma262-5.com/ELS5_Section_15.htm#Section_15.4.4.17">15.4.4.17 Array.prototype.some ( callbackfn [ , thisArg ] ) - ECMAScript 5</a></li>
	</ul>
	</dd>
	<dt>MDC</dt>
	<dd>
	<ul>
	<li><a href="https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/some">some - MDC</a></li>
	</ul>
	</dd>
	</dl>

	</body>
	</html>