PageRenderTime 21ms CodeModel.GetById 11ms app.highlight 9ms RepoModel.GetById 0ms app.codeStats 0ms

/public/javascripts/jQuery-validationEngine-2.6.1/demos/demoPositioning.html

https://bitbucket.org/hamidrezas/melobit
HTML | 130 lines | 118 code | 12 blank | 0 comment | 0 complexity | 7aca5b506dcdfa48b6f8cb9a249f2f6b MD5 | raw file
Possible License(s): AGPL-1.0
  1<!DOCTYPE html>
  2<html>
  3<head>
  4	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5	<title>JQuery Validation Engine</title>
  6	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
  7	<link rel="stylesheet" href="../css/template.css" type="text/css"/>
  8	<script src="../js/jquery-1.6.min.js" type="text/javascript">
  9	</script>
 10	<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
 11	</script>
 12	<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
 13	</script>
 14	<script>
 15		//$.validationEngine.defaults.scroll = false;
 16		
 17
 18		jQuery(document).ready(function(){
 19			// binds form submission and fields to the validation engine
 20			jQuery("#formID").validationEngine('attach');
 21			//jQuery("#formID").validationEngine('attach',{ isOverflown: true });
 22			//jQuery("#formID").validationEngine('attach',{ relative: true });
 23		});
 24            
 25		/**
 26		*
 27		* @param {jqObject} the field where the validation applies
 28		* @param {Array[String]} validation rules for this field
 29		* @param {int} rule index
 30		* @param {Map} form options
 31		* @return an error string if validation failed
 32		*/
 33		function checkHELLO(field, rules, i, options){
 34			if (field.val() != "HELLO") {
 35				// this allows to use i18 for the error msgs
 36				return options.allrules.validate2fields.alertText;
 37			}
 38		}
 39		function changeposition(wo) {
 40			jQuery('#formID').validationEngine('hide');
 41			jQuery('input').attr('data-prompt-position',wo);
 42			jQuery('input').data('promptPosition',wo);
 43			jQuery('textarea').attr('data-prompt-position',wo);
 44			jQuery('textarea').data('promptPosition',wo);
 45			jQuery('select').attr('data-prompt-position',wo);
 46			jQuery('select').data('promptPosition',wo);
 47		}
 48		function changemethod(welche) {
 49			jQuery('#formID').validationEngine('hide');
 50			jQuery("#formID").validationEngine('detach');
 51			jQuery("#formID").validationEngine('attach');
 52		}
 53	</script>
 54	<style>
 55	/* fix overly wacky stylesheet */
 56	input {
 57		display: inline !important;
 58	}
 59	</style>
 60</head>
 61<body>
 62	<p>
 63		<a href="#" onclick="jQuery('#formID').validationEngine('validate')">Evaluate form</a>
 64		| <a href="#" onclick="jQuery('#formID').validationEngine('hide')">Close all prompts on form</a>
 65		<br> <a href="#" onclick="changeposition('topRight')">TopRight</a>
 66		| <a href="#" onclick="changeposition('topLeft')">TopLeft</a>
 67		| <a href="#" onclick="changeposition('bottomRight')">BottomRight</a>
 68		| <a href="#" onclick="changeposition('bottomLeft')">BottomLeft</a>
 69		| <a href="#" onclick="changeposition('centerRight')">CenterRight</a>
 70		| <a href="#" onclick="changeposition('centerLeft')">CenterLeft</a>
 71		<br> 
 72		<a href="#" style="float:left" onclick="jQuery('body').attr('dir','ltr')">Left to Right</a>
 73		<a href="#" style="float:right" onclick="jQuery('body').attr('dir','rtl')">Right to Left</a>
 74		<br> <a href="../index.html" >Back to index</a>
 75	</p>
 76	<p>
 77		This demonstration shows positioning
 78		<br/>
 79	</p>
 80<div style="height:500px;overflow-y:scroll;">
 81  <div style="height:1000px;">
 82	<form id="formID" class="formular" method="post" action="" style="position:relative;">
 83		<fieldset>
 84			<legend>
 85                    
 86			</legend>
 87			<label>
 88				Field is required : 
 89				
 90			</label>
 91			<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
 92			<label>Favorite sport 1:</label>
 93				<select name="sport" id="sport" class="validate[required]">
 94					<option value="">Choose a sport</option>
 95					<option value="option1">Tennis</option>
 96					<option value="option2">Football</option>
 97					<option value="option3">Golf</option>
 98				</select>
 99			
100			<label>Favorite sport 2:</label>
101				<select name="sport2" id="sport2" multiple class="validate[required]">
102					<option value="">Choose a sport</option>
103					<option value="option1"><l i>Tennis</li></option>
104					<option value="option2">Football</option>
105					<option value="option3">Golf</option>
106				</select>
107			
108			<label>Additional info:</label>
109				<textarea class="validate[required]" id="add" style="width:250px;height:50px;"></textarea>
110			
111			<label>Radio Group: </label>
112				<div>radio 1: 
113				<input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/></div>
114				<div>radio 2: 
115				<input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/></div>
116				<div>radio 3: 
117				<input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/></div>
118			
119			<label>I accept terms of use : </label>
120				<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
121				
122			
123		</fieldset>
124
125		<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
126	</form>
127  </div>
128</div>
129</body>
130</html>