Guidelines: Form design

From Pandora FMS Wiki
Jump to: navigation, search

1 Form design guidelines

This guideline is done for being used with Pandora FMS; but could be adapted to be used with other projects as well.

1.1 Introduction and scope

1.2 Validation

Since now (April 2011) all forms will try to validate data, using the jQuery validation plugin [1].

This is very easy to use, just requires a few javascript code, making reference to form ID and names of the form elements.

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  <script type="text/javascript"> 
    $(document).ready(function() { 
	      $("#form1").validate({ 
	        rules: { 
		  combo_numeric: { 
			required: true,
			min: 1,
		  },
	          text_input: { 
			required: true,
			minlenght: 10,
	                maxlenght: 10,
		  },
	          email: {
		          required: true, 
		          email: true 
  	      	  }, 
		  password: {
		      required: true,
		      minlength: 4
		  },

		  password2: {
		      required: true,
		      minlength: 4,
		      equalTo: "#password"
		  }
		}
	      }); 
	    }); 
  </script> 
  
  <?php
  echo "<form id=form1 method=post >";
  echo "<table widht=100% cellpading=5 cellspacing=5>";

  echo "<tr><td>";
  print_label ("Alias o login name",'');

  echo "<td width=60%>";
  print_input_text ("text_input", $username,'', 15);
  .
  .
  

You will also require a few CSS entries:

  <style type="text/css">
  label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }