Server Validation
OK, so it's not jQuery, but it's meant to integrate .NET with jQuery. This custom .NET TextBox can be used to provide server validation similar to the jQuery validation plugin. This way, users with javascript turned off should have a consistent experience using your forms. Some, not all, of the validation features are implemented, but should be enough to get you started.
Features
- Class/Attribute based settings
- Same error messages and placement as jQuery validator
- Use your own customized error messages
- Implements errorLabelContainer
- Create your own error message template
- Integrated "Format" attribute for use with masked input plugin
Demo
An example of the server-side validation control can be viewed here.
Download
You can download the classes, source, and example here.
How it works
If Page.IsPostBack is true, it will validate the TextBox during its OnLoad event. When the control is rendered, it will write the error if one exists. If the errorLabelContainer is used, it will append the error message to the set control ID.jQValidator Properties
- Template: Error object HTML. <label class='{1}' for='{2}'>{0}<label>
- errorLabelContainer: String ID of error placholder if messages should not go next to TextBox. Default is null
- ErrorClass: Error class which is added to Template and TextBox if error exists. Default is 'error'
- IsValid: Is the page valid. Defaults to true
- ValidateAll: Validate all controls at once or not. Defaults to true
- AddErrorClassToElement: Whether error class should be added to TextBox. Default is true
- ValidationObjects: A Hashtable of jQValidationObject which stores all validation rules
New TextBox Properties
- EqualTo: Control ID, with preceding #, to match. ex:) EqualTo="#pword"
- Format: Masked input format. 9=number, a=character, *=number or char
- Max: Max number value allowed in control
- Min: Min number value allowed in control
- MinLength: Required length of input
- Range: Number range control value must match. This does not match client-side functionality. ex:) Range="20-100"
- RangeLength: Number range length of input must match. ex:) RangeLength=2-4
- ErrorMessage: A custom message for this specific TextBox. Overrides any error validation message.
Using Server Validation TextBox
- Correct Page Type:
- Change your page to be a jQPage. Otherwise, you must set jQValidator.IsValid to false in the OnPreInit event.
- Is form valid?
- On a button click event, check the jQValidator.IsValid variable. If it's false, the page has something which is not correct.
- Changing Template:
- The string will be formatted with 3 attributes. Message, ErrorClass, and For.
- ex:) jQValidator.Template = "<li class='{1}' for='{2}'>{0}<li>"
- Custom Error Message:
- In Page_Load set jQValidator.ValidationObjects["[rule]"].Message
- ex:) ((jQValidationObject)jQValidator.ValidationObjects["email"]).Message = "My custom email message";
- Errors in container:
- Set errorLabelContainer property to control ID during Page_Load. Control must have runat="server" set to true.
- ex:) jQValidator.errorLabelContainer = "validationErrors";
- Custom RegEx Rule:
- Create your own rule as a regular expression
- ex:) jQValidator.ValidationObjects.Add("[rule]", new jQValidationObject("[regex]","[error message]"));
- Custom Method Rule:
- Custom methods currently must exist as a Page method. You can write your own function (say "Testing") in the current page. The only argument passed in will be the TextBox control.
- ex:) public bool Testing(jQueryServerControls.TextBox tb) { return false; } //causes validation to fail
- You then add your rule "test" during the Page_Load event. For methods, the third parameter should be true to indicate it is a method rule. Be sure to check if the key already exists before adding. Now any TextBox with a 'test' class will be validated with this rule.
- ex:) if(!jQValidator.ValidationObjects.Contains("test")) { jQValidator.ValidationObjects.Add("test", new jQValidationObject("Testing","Failed Test",true)); }
- Now, you won't want to re-write your validation in every page so you can create a class which extends jQPage and use your custom class instead of jQPage for the Page type.
- ex:) public class MyPage : jQPage { (add your methods) }, then _Default : MyPage