/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 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    5. 

  5. 	<title>JQuery Validation Engine</title>
    6. 

  6. 	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
    7. 

  7. 	<link rel="stylesheet" href="../css/template.css" type="text/css"/>
    8. 

  8. 	<script src="../js/jquery-1.6.min.js" type="text/javascript">
    9. 

  9. 	</script>
    10. 

  10. 	<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
    11. 

  11. 	</script>
    12. 

  12. 	<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
    13. 

  13. 	</script>
    14. 

  14. 	<script>
    15. 

  15. 		//$.validationEngine.defaults.scroll = false;
    16. 

  16. 		
    17. 

  17. 

  18. 		jQuery(document).ready(function(){
    19. 

  19. 			// binds form submission and fields to the validation engine
    20. 

  20. 			jQuery("#formID").validationEngine('attach');
    21. 

  21. 			//jQuery("#formID").validationEngine('attach',{ isOverflown: true });
    22. 

  22. 			//jQuery("#formID").validationEngine('attach',{ relative: true });
    23. 

  23. 		});
    24. 

  24.             
    25. 

  25. 		/**
    26. 

  26. 		*
    27. 

  27. 		* @param {jqObject} the field where the validation applies
    28. 

  28. 		* @param {Array[String]} validation rules for this field
    29. 

  29. 		* @param {int} rule index
    30. 

  30. 		* @param {Map} form options
    31. 

  31. 		* @return an error string if validation failed
    32. 

  32. 		*/
    33. 

  33. 		function checkHELLO(field, rules, i, options){
    34. 

  34. 			if (field.val() != "HELLO") {
    35. 

  35. 				// this allows to use i18 for the error msgs
    36. 

  36. 				return options.allrules.validate2fields.alertText;
    37. 

  37. 			}
    38. 

  38. 		}
    39. 

  39. 		function changeposition(wo) {
    40. 

  40. 			jQuery('#formID').validationEngine('hide');
    41. 

  41. 			jQuery('input').attr('data-prompt-position',wo);
    42. 

  42. 			jQuery('input').data('promptPosition',wo);
    43. 

  43. 			jQuery('textarea').attr('data-prompt-position',wo);
    44. 

  44. 			jQuery('textarea').data('promptPosition',wo);
    45. 

  45. 			jQuery('select').attr('data-prompt-position',wo);
    46. 

  46. 			jQuery('select').data('promptPosition',wo);
    47. 

  47. 		}
    48. 

  48. 		function changemethod(welche) {
    49. 

  49. 			jQuery('#formID').validationEngine('hide');
    50. 

  50. 			jQuery("#formID").validationEngine('detach');
    51. 

  51. 			jQuery("#formID").validationEngine('attach');
    52. 

  52. 		}
    53. 

  53. 	</script>
    54. 

  54. 	<style>
    55. 

  55. 	/* fix overly wacky stylesheet */
    56. 

  56. 	input {
    57. 

  57. 		display: inline !important;
    58. 

  58. 	}
    59. 

  59. 	</style>
    60. 

  60. </head>
    61. 

  61. <body>
    62. 

  62. 	<p>
    63. 

  63. 		<a href="#" onclick="jQuery('#formID').validationEngine('validate')">Evaluate form</a>
    64. 

  64. 		| <a href="#" onclick="jQuery('#formID').validationEngine('hide')">Close all prompts on form</a>
    65. 

  65. 		<br> <a href="#" onclick="changeposition('topRight')">TopRight</a>
    66. 

  66. 		| <a href="#" onclick="changeposition('topLeft')">TopLeft</a>
    67. 

  67. 		| <a href="#" onclick="changeposition('bottomRight')">BottomRight</a>
    68. 

  68. 		| <a href="#" onclick="changeposition('bottomLeft')">BottomLeft</a>
    69. 

  69. 		| <a href="#" onclick="changeposition('centerRight')">CenterRight</a>
    70. 

  70. 		| <a href="#" onclick="changeposition('centerLeft')">CenterLeft</a>
    71. 

  71. 		<br> 
    72. 

  72. 		<a href="#" style="float:left" onclick="jQuery('body').attr('dir','ltr')">Left to Right</a>
    73. 

  73. 		<a href="#" style="float:right" onclick="jQuery('body').attr('dir','rtl')">Right to Left</a>
    74. 

  74. 		<br> <a href="../index.html" >Back to index</a>
    75. 

  75. 	</p>
    76. 

  76. 	<p>
    77. 

  77. 		This demonstration shows positioning
    78. 

  78. 		<br/>
    79. 

  79. 	</p>
    80. 

  80. <div style="height:500px;overflow-y:scroll;">
    81. 

  81.   <div style="height:1000px;">
    82. 

  82. 	<form id="formID" class="formular" method="post" action="" style="position:relative;">
    83. 

  83. 		<fieldset>
    84. 

  84. 			<legend>
    85. 

  85.                     
    86. 

  86. 			</legend>
    87. 

  87. 			<label>
    88. 

  88. 				Field is required : 
    89. 

  89. 				
    90. 

  90. 			</label>
    91. 

  91. 			<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
    92. 

  92. 			<label>Favorite sport 1:</label>
    93. 

  93. 				<select name="sport" id="sport" class="validate[required]">
    94. 

  94. 					<option value="">Choose a sport</option>
    95. 

  95. 					<option value="option1">Tennis</option>
    96. 

  96. 					<option value="option2">Football</option>
    97. 

  97. 					<option value="option3">Golf</option>
    98. 

  98. 				</select>
    99. 

  99. 			
    100. 

  100. 			<label>Favorite sport 2:</label>
    101. 

  101. 				<select name="sport2" id="sport2" multiple class="validate[required]">
    102. 

  102. 					<option value="">Choose a sport</option>
    103. 

  103. 					<option value="option1"><l i>Tennis</li></option>
    104. 

  104. 					<option value="option2">Football</option>
    105. 

  105. 					<option value="option3">Golf</option>
    106. 

  106. 				</select>
    107. 

  107. 			
    108. 

  108. 			<label>Additional info:</label>
    109. 

  109. 				<textarea class="validate[required]" id="add" style="width:250px;height:50px;"></textarea>
    110. 

  110. 			
    111. 

  111. 			<label>Radio Group: </label>
    112. 

  112. 				<div>radio 1: 
    113. 

  113. 				<input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/></div>
    114. 

  114. 				<div>radio 2: 
    115. 

  115. 				<input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/></div>
    116. 

  116. 				<div>radio 3: 
    117. 

  117. 				<input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/></div>
    118. 

  118. 			
    119. 

  119. 			<label>I accept terms of use : </label>
    120. 

  120. 				<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
    121. 

  121. 				
    122. 

  122. 			
    123. 

  123. 		</fieldset>
    124. 

  124. 

  125. 		<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
    126. 

  126. 	</form>
    127. 

  127.   </div>
    128. 

  128. </div>
    129. 

  129. </body>
    130. 

  130. </html>
    131.