Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2>jQuery HTML5 &lt;datalist&gt; validation</h2>
<form method="post" id="ItemEditForm" action="">
	<label for="ModelNameField">Model: </label>
	<input id="ModelNameField" name="modelname" list="ModelName" autocomplete="off">
	<datalist id="ModelName">
		<option value="Intel Advanced ML" />
		<option value="Intel D101GGC" />
		<option value="Intel D815EEA" />
		<option value="Intel D815EEA2" />
		<option value="Intel D845GBV" />
		<option value="Intel D845GEBV2" />
		<option value="Intel D845GLAD" />
		<option value="Intel D845GLVA" />
		<option value="Intel D845GVAD2" />
		<option value="Intel D845GVSR" />
		<option value="Intel D845HVL" />
		<option value="Intel D845WD" />
		<option value="Intel D845WN" />
		<option value="Intel D850GB" />
		<option value="Intel D850MV" />
		<option value="Intel D865GBF" />
		<option value="Intel D865GLC" />
		<option value="Intel D915GAG" />
		<option value="Intel D915GAV" />
		<option value="Intel D915PBL" />
		<option value="Intel D925XECV2" />
		<option value="Intel D945GNT" />
		<option value="Intel D945GTP" />
		<option value="Intel D945GTPL" />
		<option value="Intel D945P5N" />
		<option value="Intel D945PL" />
		<option value="Intel D945PLRN" />
		<option value="Intel D946GZIS" />
		<option value="Intel DG31PR" />
		<option value="Intel DG33BU" />
		<option value="Intel DG33FB" />
		<option value="Intel DG35EC" />
		<option value="Intel DG41RQ" />
		<option value="Intel DG43GT" />
		<option value="Intel DG43NB" />
		<option value="Intel DG845GV" />
		<option value="Intel DG965SS" />
		<option value="Intel DH55HC" />
		<option value="Intel DH55TC" />
		<option value="Intel DH67BLB2" />
		<option value="Intel DH67BLB3" />
		<option value="Intel DH77EB" />
		<option value="Intel DP45SG" />
		<option value="Intel DP55WG" />
		<option value="Intel DPSSWB" />
		<option value="Intel DQ35MP" />
		<option value="Intel DQ45CB" />
		<option value="Intel DQ57TM" />
		<option value="Intel DQ965GF" />
		<option value="Intel E210882" />
		<option value="Intel E41515-406" />
		<option value="Intel E87653-001" />
		<option value="Intel G7ESZ" />
		<option value="Intel ISP1100" />
		<option value="Intel L440GX" />
		<option value="Intel MFS2600KI" />
		<option value="Intel MFS2600KIB" />
		<option value="Intel MFS5520U" />
		<option value="Intel MFS5520VI" />
		<option value="Intel MFS5520VIR" />
		<option value="Intel N440BX" />
		<option value="Intel NL440BX" />
		<option value="Intel P2600IP" />
		<option value="Intel R440LX" />
		<option value="Intel S1200BTL" />
		<option value="Intel S1200BTLR" />
		<option value="Intel S1200V3RP" />
		<option value="Intel S2400SC2" />
		<option value="Intel S26001P" />
		<option value="Intel S2600CP" />
		<option value="Intel S2600CP2" />
		<option value="Intel S2600IP" />
		<option value="Intel S3000AH" />
		<option value="Intel S3000AHLX" />
		<option value="Intel S3200SH" />
		<option value="Intel S3210SH" />
		<option value="Intel S3210SHLC" />
		<option value="Intel S3210SHLX" />
		<option value="Intel S340GP" />
		<option value="Intel S3420GP" />
		<option value="Intel S3420GPLC" />
		<option value="Intel S3420GPLX" />
		<option value="Intel S5000PSL" />
		<option value="Intel S5000PSLSATAR" />
		<option value="Intel S5000VCL" />
		<option value="Intel S5000VSA" />
		<option value="Intel S5000VSASATA" />
		<option value="Intel S5000VSASATAR" />
		<option value="Intel S5520HC" />
		<option value="Intel S5520HCR" />
		<option value="Intel S5520UR" />
		<option value="Intel S845WD" />
		<option value="Intel S875WP1-E" />
		<option value="Intel SBT2" />
		<option value="Intel SC5520HC" />
		<option value="Intel SCB2" />
		<option value="Intel SDS2" />
		<option value="Intel SE440BX" />
		<option value="Intel SE440BX2" />
		<option value="Intel SE7210TP1-E" />
		<option value="Intel SE7221BK1" />
		<option value="Intel SE7221BK1-E" />
		<option value="Intel SE7230NH1" />
		<option value="Intel SE7230NH1-E" />
		<option value="Intel SE7320EP2" />
		<option value="Intel SE7500CW2" />
		<option value="Intel SE7501BR2" />
		<option value="Intel SE7501BR2S" />
		<option value="Intel SE7501CW2" />
		<option value="Intel SE7501HG2" />
		<option value="Intel SE7501WV2" />
		<option value="Intel SE7505VB2" />
		<option value="Intel SE7520AF2" />
		<option value="Intel SE7520BD2" />
		<option value="Intel SE7520BD23S" />
		<option value="Intel SE7520BD2SCSI" />
		<option value="Intel SE7520JR2" />
		<option value="Intel SE7525GP2" />
		<option value="Intel SE752OBD2" />
		<option value="Intel SHG2" />
		<option value="Intel STL2" />
		<option value="Intel SVDE374-14659" />
		<option value="Intel T440BX" />
		<option value="Intel TC430HX" />
		<option value="Micro-Star Inc. G31TM-P21" />
		<option value="Micro-Star Inc. MS-6728 2.00" />
		<option value="Micro-Star Inc. MS-7036" />
		<option value="Micro-Star Inc. MS-9151" />
		<option value="MSI MS-6787" />
		<option value="MSI MS-7529" />
		<option value="MSI N1996" />
		<option value="MSI PM8M-V" />
		<option value="Super Micro X7SB4/E" />
		<option value="Super Micro X7SBL" />
		<option value="Super Micro X9DBL-3F" />
		<option value="Acer Altos 1200" />
		<option value="Clarotech zUnknown HP" />
		<option value="ASRock G41M-V53" />
		<option value="ASRock P4i45Gx_PE" />
		<option value="ASUS H61M-C" />
		<option value="ASUS H81M-E" />
		<option value="ASUS P2B" />
		<option value="ASUS P4SDR-VM" />
		<option value="ASUS P5PE-VM" />
		<option value="Bioster Group G3IE-M7" />
		<option value="Compaq Proliant" />
		<option value="Compaq Proliant 1600" />
		<option value="Compaq Proliant ML530" />
		<option value="Dell 00F82W" />
		<option value="Dell 03X6X0" />
		<option value="Dell 051XDX" />
		<option value="Dell 0CN7CM" />
		<option value="Dell 0DYFC8A00" />
		<option value="Dell 0GC080" />
		<option value="Dell 0H603H" />
		<option value="Dell 0K29HNA01" />
		<option value="Dell 0N83VF" />
		<option value="Dell 0PM2CW" />
		<option value="Dell 0PWN3" />
		<option value="Dell 0R5KP9" />
		<option value="Dell 0RC130" />
		<option value="Dell 0X3468" />
		<option value="Dell 0YH299" />
		<option value="Dell 320" />
		<option value="Dell 420" />
		<option value="Dell 620" />
		<option value="Dell 720" />
		<option value="Dell DAT54AMB8C2" />
		<option value="Dell E93839" />
		<option value="Dell EODB551CB76" />
		<option value="Dell Manufactured for dell" />
		<option value="Dell NX642 A05" />
		<option value="Dell OCN7CM" />
		<option value="Dell OP229K" />
		<option value="Dell OR5KP9" />
		<option value="Dell PowerEdge 1800" />
		<option value="Dell PowerEdge 1950" />
		<option value="Dell PowerEdge 1950 111" />
		<option value="Dell PowerEdge 2600" />
		<option value="Dell PowerEdge 2800" />
		<option value="Dell PowerEdge 2850" />
		<option value="Dell PowerEdge 2900" />
		<option value="Dell PowerEdge 2950" />
		<option value="Dell PowerEdge 750" />
		<option value="Dell PowerEdge 850" />
		<option value="Dell PowerEdge 860" />
		<option value="Dell PowerEdge R210" />
		<option value="Dell PowerEdge R210 II" />
		<option value="Dell PowerEdge R220" />
		<option value="Dell PowerEdge R310" />
		<option value="Dell PowerEdge R520 TPM" />
		<option value="Dell PowerEdge R610" />
		<option value="Dell PowerEdge R710" />
		<option value="Dell PowerEdge R720" />
		<option value="Dell PowerEdge T110 II" />
		<option value="Dell PowerEdge T300" />
		<option value="Dell PowerEdge T320" />
		<option value="Dell PowerEdge T410" />
		<option value="Dell PowerEdge T630" />
		<option value="ECS G31T-M7" />
		<option value="Foxconn LS-36" />
		<option value="Fujitsu Siemens Primergy TX200" />
		<option value="Gigabyte 945GCM-S2C" />
		<option value="Gigabyte GA 8VM 800M" />
		<option value="Gigabyte GA-6BXDU" />
		<option value="Gigabyte GA-6VXC7-4X" />
		<option value="Gigabyte GA-8I915G-MF" />
		<option value="Gigabyte GA-8IG1000MK" />
		<option value="Gigabyte H67M-D2-B3" />
		<option value="HP 4K0964" />
		<option value="HP 5C7325P04Z" />
		<option value="HP DX2000 MT" />
		<option value="HP Proliant" />
		<option value="HP Proliant DL140" />
		<option value="HP Proliant DL160 G8" />
		<option value="HP ProLiant DL360p G8" />
		<option value="HP Proliant DL370 G6" />
		<option value="HP Proliant DL380" />
		<option value="HP Proliant DL380 G4" />
		<option value="HP ProLiant DL380 G7" />
		<option value="HP ProLiant DL380 G8" />
		<option value="HP Proliant DL380P" />
		<option value="HP Proliant ML150 G5" />
		<option value="HP Proliant ML150 G6" />
		<option value="HP ProLiant ML350 G4" />
		<option value="HP Proliant ML350 G5" />
		<option value="HP ProLiant ML350 G6" />
		<option value="HP Proliant ML350p G8" />
		<option value="HP Proliant ML370 G5" />
		<option value="HP ProLiant ML380 G5" />
		<option value="HP PWRGDCR19AUX" />
		<option value="HP Wistron Corporation M71IXA" />
		<option value="IBM 13N0879" />
		<option value="IBM 46D1406" />
		<option value="IBM 8639-0D0" />
		<option value="IBM 8646X" />
		<option value="IBM 8676X" />
		<option value="IBM H17596G" />
		<option value="IBM MS-9151" />
		<option value="IBM Netfinity 3000" />
		<option value="IBM PASS 10" />
		<option value="IBM xSeries 3400" />
		<option value="IBM xSeries 3550 M4" />
		<option value="IBM xSeries 3650" />
		<option value="IBM xSeries 3650 M4" />
	</datalist>
	<input type="submit" value="Submit">
</form>
<hr />
<p>List of valid options for testing:</p>
<ul>
	<li>Intel D101GGC</li>
	<li>Intel D815EEA</li>
	<li>Intel D815EEA2</li>
	<li>Intel D845GBV</li>
	<li>Intel D845GEBV2</li>
	<li>Intel D845GLAD</li>
	<li>Intel D845GLVA</li>
	<li>Intel D845GVAD2</li>
	<li>Intel D845GVSR</li>
	<li>Intel D845HVL</li>
	<li>Intel D845WD</li>
	<li>Intel D845WN</li>
	<li>Intel D850GB</li>
	<li>Intel D850MV</li>
	<li>Intel D865GBF</li>
	<li>Intel D865GLC</li>
	<li>Intel D915GAG</li>
	<li>Intel D915GAV</li>
	<li>Intel D915PBL</li>
	<li>Intel D925XECV2</li>
	<li>Intel D945GNT</li>
	<li>Intel D945GTP</li>
	<li>Intel D945GTPL</li>
	<li>Intel D945P5N</li>
	<li>Intel D945PL</li>
	<li>Intel D945PLRN</li>
	<li>Intel D946GZIS</li>
	<li>Intel DG31PR</li>
	<li>Intel DG33BU</li>
	<li>Intel DG33FB</li>
	<li>Intel DG35EC</li>
	<li>Intel DG41RQ</li>
	<li>Intel DG43GT</li>
	<li>Intel DG43NB</li>
	<li>Intel DG845GV</li>
	<li>Intel DG965SS</li>
	<li>Intel DH55HC</li>
	<li>Intel DH55TC</li>
	<li>Intel DH67BLB2</li>
	<li>Intel DH67BLB3</li>
	<li>Intel DH77EB</li>
	<li>Intel DP45SG</li>
	<li>Intel DP55WG</li>
	<li>Intel DPSSWB</li>
	<li>Intel DQ35MP</li>
	<li>Intel DQ45CB</li>
	<li>Intel DQ57TM</li>
	<li>Intel DQ965GF</li>
	<li>Intel E210882</li>
	<li>Intel E41515-406</li>
	<li>Intel E87653-001</li>
	<li>Intel G7ESZ</li>
	<li>Intel ISP1100</li>
	<li>Intel L440GX</li>
	<li>Intel MFS2600KI</li>
	<li>Intel MFS2600KIB</li>
	<li>Intel MFS5520U</li>
	<li>Intel MFS5520VI</li>
	<li>Intel MFS5520VIR</li>
	<li>Intel N440BX</li>
	<li>Intel NL440BX</li>
	<li>Intel P2600IP</li>
	<li>Intel R440LX</li>
	<li>Intel S1200BTL</li>
	<li>Intel S1200BTLR</li>
	<li>Intel S1200V3RP</li>
	<li>Intel S2400SC2</li>
	<li>Intel S26001P</li>
	<li>Intel S2600CP</li>
	<li>Intel S2600CP2</li>
	<li>Intel S2600IP</li>
	<li>Intel S3000AH</li>
	<li>Intel S3000AHLX</li>
	<li>Intel S3200SH</li>
	<li>Intel S3210SH</li>
	<li>Intel S3210SHLC</li>
	<li>Intel S3210SHLX</li>
	<li>Intel S340GP</li>
	<li>Intel S3420GP</li>
	<li>Intel S3420GPLC</li>
	<li>Intel S3420GPLX</li>
	<li>Intel S5000PSL</li>
	<li>Intel S5000PSLSATAR</li>
	<li>Intel S5000VCL</li>
	<li>Intel S5000VSA</li>
	<li>Intel S5000VSASATA</li>
	<li>Intel S5000VSASATAR</li>
	<li>Intel S5520HC</li>
	<li>Intel S5520HCR</li>
	<li>Intel S5520UR</li>
	<li>Intel S845WD</li>
	<li>Intel S875WP1-E</li>
	<li>Intel SBT2</li>
	<li>Intel SC5520HC</li>
	<li>Intel SCB2</li>
	<li>Intel SDS2</li>
	<li>Intel SE440BX</li>
	<li>Intel SE440BX2</li>
	<li>Intel SE7210TP1-E</li>
	<li>Intel SE7221BK1</li>
	<li>Intel SE7221BK1-E</li>
	<li>Intel SE7230NH1</li>
	<li>Intel SE7230NH1-E</li>
	<li>Intel SE7320EP2</li>
	<li>Intel SE7500CW2</li>
	<li>Intel SE7501BR2</li>
	<li>Intel SE7501BR2S</li>
	<li>Intel SE7501CW2</li>
	<li>Intel SE7501HG2</li>
	<li>Intel SE7501WV2</li>
	<li>Intel SE7505VB2</li>
	<li>Intel SE7520AF2</li>
	<li>Intel SE7520BD2</li>
	<li>Intel SE7520BD23S</li>
	<li>Intel SE7520BD2SCSI</li>
	<li>Intel SE7520JR2</li>
	<li>Intel SE7525GP2</li>
	<li>Intel SE752OBD2</li>
	<li>Intel SHG2</li>
	<li>Intel STL2</li>
	<li>Intel SVDE374-14659</li>
	<li>Intel T440BX</li>
	<li>Intel TC430HX</li>
	<li>Micro-Star Inc. G31TM-P21</li>
	<li>Micro-Star Inc. MS-6728 2.00</li>
	<li>Micro-Star Inc. MS-7036</li>
	<li>Micro-Star Inc. MS-9151</li>
	<li>MSI MS-6787</li>
	<li>MSI MS-7529</li>
	<li>MSI N1996</li>
	<li>MSI PM8M-V</li>
	<li>Super Micro X7SB4/E</li>
	<li>Super Micro X7SBL</li>
	<li>Super Micro X9DBL-3F</li>
	<li>Acer Altos 1200</li>
	<li>Clarotech zUnknown HP</li>
	<li>ASRock G41M-V53</li>
	<li>ASRock P4i45Gx_PE</li>
	<li>ASUS H61M-C</li>
	<li>ASUS H81M-E</li>
	<li>ASUS P2B</li>
	<li>ASUS P4SDR-VM</li>
	<li>ASUS P5PE-VM</li>
	<li>Bioster Group G3IE-M7</li>
	<li>Compaq Proliant</li>
	<li>Compaq Proliant 1600</li>
	<li>Compaq Proliant ML530</li>
	<li>Dell 00F82W</li>
	<li>Dell 03X6X0</li>
	<li>Dell 051XDX</li>
	<li>Dell 0CN7CM</li>
	<li>Dell 0DYFC8A00</li>
	<li>Dell 0GC080</li>
	<li>Dell 0H603H</li>
	<li>Dell 0K29HNA01</li>
	<li>Dell 0N83VF</li>
	<li>Dell 0PM2CW</li>
	<li>Dell 0PWN3</li>
	<li>Dell 0R5KP9</li>
	<li>Dell 0RC130</li>
	<li>Dell 0X3468</li>
	<li>Dell 0YH299</li>
	<li>Dell 320</li>
	<li>Dell 420</li>
	<li>Dell 620</li>
	<li>Dell 720</li>
	<li>Dell DAT54AMB8C2</li>
	<li>Dell E93839</li>
	<li>Dell EODB551CB76</li>
	<li>Dell Manufactured for dell</li>
	<li>Dell NX642 A05</li>
	<li>Dell OCN7CM</li>
	<li>Dell OP229K</li>
	<li>Dell OR5KP9</li>
	<li>Dell PowerEdge 1800</li>
	<li>Dell PowerEdge 1950</li>
	<li>Dell PowerEdge 1950 111</li>
	<li>Dell PowerEdge 2600</li>
	<li>Dell PowerEdge 2800</li>
	<li>Dell PowerEdge 2850</li>
	<li>Dell PowerEdge 2900</li>
	<li>Dell PowerEdge 2950</li>
	<li>Dell PowerEdge 750</li>
	<li>Dell PowerEdge 850</li>
	<li>Dell PowerEdge 860</li>
	<li>Dell PowerEdge R210</li>
	<li>Dell PowerEdge R210 II</li>
	<li>Dell PowerEdge R220</li>
	<li>Dell PowerEdge R310</li>
	<li>Dell PowerEdge R520 TPM</li>
	<li>Dell PowerEdge R610</li>
	<li>Dell PowerEdge R710</li>
	<li>Dell PowerEdge R720</li>
	<li>Dell PowerEdge T110 II</li>
	<li>Dell PowerEdge T300</li>
	<li>Dell PowerEdge T320</li>
	<li>Dell PowerEdge T410</li>
	<li>Dell PowerEdge T630</li>
	<li>ECS G31T-M7</li>
	<li>Foxconn LS-36</li>
	<li>Fujitsu Siemens Primergy TX200</li>
	<li>Gigabyte 945GCM-S2C</li>
	<li>Gigabyte GA 8VM 800M</li>
	<li>Gigabyte GA-6BXDU</li>
	<li>Gigabyte GA-6VXC7-4X</li>
	<li>Gigabyte GA-8I915G-MF</li>
	<li>Gigabyte GA-8IG1000MK</li>
	<li>Gigabyte H67M-D2-B3</li>
	<li>HP 4K0964</li>
	<li>HP 5C7325P04Z</li>
	<li>HP DX2000 MT</li>
	<li>HP Proliant</li>
	<li>HP Proliant DL140</li>
	<li>HP Proliant DL160 G8</li>
	<li>HP ProLiant DL360p G8</li>
	<li>HP Proliant DL370 G6</li>
	<li>HP Proliant DL380</li>
	<li>HP Proliant DL380 G4</li>
	<li>HP ProLiant DL380 G7</li>
	<li>HP ProLiant DL380 G8</li>
	<li>HP Proliant DL380P</li>
	<li>HP Proliant ML150 G5</li>
	<li>HP Proliant ML150 G6</li>
	<li>HP ProLiant ML350 G4</li>
	<li>HP Proliant ML350 G5</li>
	<li>HP ProLiant ML350 G6</li>
	<li>HP Proliant ML350p G8</li>
	<li>HP Proliant ML370 G5</li>
	<li>HP ProLiant ML380 G5</li>
	<li>HP PWRGDCR19AUX</li>
	<li>HP Wistron Corporation M71IXA</li>
	<li>IBM 13N0879</li>
	<li>IBM 46D1406</li>
	<li>IBM 8639-0D0</li>
	<li>IBM 8646X</li>
	<li>IBM 8676X</li>
	<li>IBM H17596G</li>
	<li>IBM MS-9151</li>
	<li>IBM Netfinity 3000</li>
	<li>IBM PASS 10</li>
	<li>IBM xSeries 3400</li>
	<li>IBM xSeries 3550 M4</li>
	<li>IBM xSeries 3650</li>
	<li>IBM xSeries 3650 M4</li>
</ul>
              
            
!

CSS

              
                /* because who does "Times New Roman" */
* {
	font-family: Arial, sans-serif;
}

              
            
!

JS

              
                // http://stackoverflow.com/a/24936814/4779449
function datalistValidator(modelname) {
	var obj = $("#ModelName").find("option[value='" + modelname + "']");
	if (obj != null && obj.length > 0) {
		//alert("valid"); // allow form submission
		return true;
	}
	//alert("invalid"); // don't allow form submission
	return false;
}

$(document).ready(function () {
	$("#ItemEditForm").submit(function () {
		var modelname = $("#ModelNameField").val();
		var existingModelName = $("h2").text();
		//alert("Submitted: " + modelname);
		if (datalistValidator(modelname)) {
			alert(modelname + " is valid");
			return true;
		}
		alert(modelname + " is not a valid Model Name");
		$("#ModelNameField")
			.val(existingModelName)
			.focus()
			.select()
			.animate({
				right: "25px"
			})
			.animate({
				left: "25px"
			});
		return false;
	});
});

              
            
!
999px

Console