Skip to content

Commit

Permalink
Big one: this update includes breaking changes. Please note there is …
Browse files Browse the repository at this point in the history 
…a change within the error messages for lengthMin and lengthMax (not longer one message for both but for each of them).

All new feauters, changes and fixes were sponsered by my current employer: Paints Multimedia GmbH in Hamburg , Germany, http://paints.de

added: posibility to define selectbox option default value
added: Some (not perfect but good working) solution for using custom error messages. See new demo with error messages next to each form element!
added: Option validateTimeout now could take "blur" to prevent validating before user leaves form element
added: Option validateLiveMsg to disable the "click here to disable live validation" message
added: Option validateTimeoutCaptcha to set the mulitplicator when using captcha live validation
added: Option errorSummery: deactivate error summery or show only when form is submitted (set to "onSubmit")
fixed: error messages are not shown immediately when tabbing into a required field
fixed: events for selectboxes, checkboxes and radiobuttons changed due to problems in IE and Chrome in different UI Versions
fixed: Captcha input element must not have id but rule "captcha"
fixed: small ie6 css issue
changed: defaults copied options cause of compatibility with jQuery 1.4.x AND jQuery UI 1.8.x (one widget version for both UI versions)
changed: blur event is now a default (should improve usability)
change: moved errorArry into forms array to make access easier and to increase conformance
changed: a lot of performance tweaks
  • Loading branch information
@fnagel
fnagel committed Feb 7, 2010
1 parent 6fd37b7 commit 7cf13bc
Show file tree
Hide file tree
Showing 10 changed files with 6,915 additions and 183 deletions.
7 changes: 7 additions & 0 deletions Formular/css/style.css
View file
Expand Up @@ -96,3 +96,10 @@ input.radio {
top: 5.3em;
width: 20em;
}
/* Chrome css bug (would change styles of other browsers too, only to see where the problem is */
´/*
select.ui-state-error,
.ui-widget-content select.ui-state-error {
color: black;
}
*/
8 changes: 8 additions & 0 deletions Formular/css/tooltip.css
View file
@@ -0,0 +1,8 @@
/*Tooltip and Pointer CSS*/
.ui-tooltip {
padding:8px;
z-index:9999;
border-width:2px;
font-size: 0.8em;
width: 300px;
}
247 changes: 247 additions & 0 deletions Formular/custom-error.html
View file
@@ -0,0 +1,247 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="language" content="DE, AT, CH" scheme="DCTERMS.RFC3066" />
<meta name="creator" content="Felix Nagel, http://www.felixnagel.com for Namics (Deutschland) GmbH, http://www.namics.com" />
<title>ui.formValidator - custom error demo - jQuery UI - Felix Nagel</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/tooltip.css" rel="stylesheet" />
<!--[if gte IE 6]>
<style type="text/css">@import url(css/style_ie.css);</style>
<![endif]-->
</head>
<body>
<h1>jQuery UI - custom error demo - ui.formValidator</h1>
<div id="controls">
<a href="index.html">Standard demo</a>
</div>
<div id="wrapper">
<div id="switcher"></div>
<br />
<form id="form" action="ui.formValidator.html" method="post" enctype="multipart/form-data">
<div id="ui-formular-info" class="info ui-state-highlight ui-corner-all">
<p>
<span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
Fields with an asterix (<em>*</em>) are needed.
</p>
</div>
<div id="ui-formular-error"></div>
<fieldset class="ui-widget-content ui-corner-all">
<legend class="ui-widget-header ui-corner-all">Input's</legend>

<label for="inputtext">Text Input (email) <em title="Needed">*</em></label>
<input type="text" id="inputtext" name="inputtext-name" class="text ui-widget-content ui-corner-all" />

<label for="txtarea">Textarea</label>
<textarea id="txtarea" name="txtarea" rows="" cols="" class="text ui-widget-content ui-corner-all"></textarea>

<label for="password1">Password <em title="Needed">*</em></label>
<input name="password1-name" id="password1" type="password" class="text ui-widget-content ui-corner-all" />

<label for="password2">Password repeat</label>
<input name="password2-name" id="password2" type="password" class="text ui-widget-content ui-corner-all" />
</fieldset>
<fieldset class="ui-widget-content ui-corner-all fieldset-checkboxset">
<legend class="ui-widget-header ui-corner-all">Checkboxes</legend>
<div class="pair">
<input type="checkbox" id="checkbox_1" name="checkbox-1" class="radio checkboxset" />
<label class="ui-widget-content ui-corner-all" for="checkbox_1">Option 1</label>
</div>
<div class="pair">
<input type="checkbox" id="checkbox_2" name="checkbox-2" class="radio checkboxset" />
<label class="ui-widget-content ui-corner-all" for="checkbox_2">Option 2</label>
</div>
<div class="pair">
<input type="checkbox" id="checkbox_3" name="checkbox-3" class="radio checkboxset" />
<label class="ui-widget-content ui-corner-all" for="checkbox_3">Option 3</label>
</div>
<div class="pair">
<input type="checkbox" id="checkbox_4" name="checkbox-4" class="radio checkboxset" />
<label class="ui-widget-content ui-corner-all" for="checkbox_4">Option 4</label>
</div>
</fieldset>

<fieldset class="ui-widget-content ui-corner-all">
<legend class="ui-widget-header ui-corner-all">Radioboxes <em title="Needed">*</em></legend>
<div class="pair">
<input type="radio" id="vote_1" value="Option 1" name="vote" class="radio vote"/>
<label class="ui-widget-content ui-corner-all" for="vote_1">Option 1</label>
</div>
<div class="pair">
<input type="radio" id="vote_2" name="vote" class="radio vote"/>
<label class="ui-widget-content ui-corner-all" for="vote_2">Option 2</label>
</div>
<div class="pair">
<input type="radio" id="vote_3" name="vote" class="radio vote"/>
<label class="ui-widget-content ui-corner-all" for="vote_3">Option 3</label>
</div>
</fieldset>

<fieldset class="ui-widget-content ui-corner-all">
<legend class="ui-widget-header ui-corner-all">Others</legend>

<label for="selectset">Multiple Selectbox</label>
<select name="selectset-name" id="selectset" multiple="multiple" size="5" class="text ui-widget-content ui-corner-all">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

<label for="salutation">Selectbox<em title="Needed">*</em></label>
<select name="salutation-name" id="salutation" size="1" class="text ui-widget-content ui-corner-all">
<option value="default">Please choose...</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select>
</fieldset>

<fieldset class="ui-widget-content ui-corner-all">
<legend class="ui-widget-header ui-corner-all">Buttons</legend>

<input type="submit" id="submit" value="Send" class="submit ui-state-default ui-corner-all" />
<input type="reset" value="Reset" class="submit ui-state-default ui-corner-all" />
</fieldset>
</form>
</div>
<div id="copyright">
Copyright (c) 2009 <a href="http://www.felixnagel.com">Felix Nagel</a> for <a href="http://namics.com">Namics (Deustchland) GmbH</a>.
<a href="http://github.com/fnagel/jQuery-Accessible-RIA">jQuery Acessible RIA</a> are licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.
</div>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>
<!--
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
-->
<script type="text/javascript" src="js/ui.formValidator.js"></script>
<script type="text/javascript" src="js/ui.position.js"></script>
<script type="text/javascript" src="js/ui.tooltip.js"></script>
<script type="text/javascript">
$(function() {
var formular = $("#form").formValidator({
forms: {
inputtext: {
rules: {
regEx: "email",
required: true
},
msg: {
regEx: "Please enter a valid email adress.",
required: "Please enter your email adress."
}
},
txtarea: {
rules: {
lengthMin: 5,
lengthMax: 15
},
msg: {
lengthMin: "Please enter 5 chars minimum in the textarea.",
lengthMax: "Please enter 15 chars maximum in the textarea."
}
},
password1: {
rules: {
lengthMin: 6,
lengthMax: 15,
required: true
},
msg: {
required: "Please enter a password.",
lengthMin: "Your Password must have between 6 and 15 chars.",
lengthMax: "Your Password must have between 6 and 15 chars."
}
},
password2: {
rules: {
equalTo: "password1"
},
msg: {
equalTo: "Your passowrds need to be equal."
}
},
checkboxset: {
rules: {
lengthMin: 2,
lengthMax: 3
},
msg: {
lengthMin: "Please select 2 options minimum within the chexboxes.",
lengthMax: "Please select 3 options maximum within the chexboxes."
}
},
vote: {
rules: {
required: true
},
msg: {
required: "You have to check a radio button."
}
},
selectset: {
rules: {
lengthMin: 2,
lengthMax: 3
},
msg: {
lengthMin: "Please select 2 (or none) options minimum within the select element. You have to press [shift].",
lengthMax: "Please select 3 options maximum within the select element. You have to press [shift]."
}
},
salutation: {
rules: {
required: true
},
msg: {
required: "Please select a salutation."
}
}
},
validateLive: true,
errorSummery: "onSubmit",
disabled: false,
submitHowTo: "iframe",
submitUrl: "server.php",
customError: function(event, data){
for (var error in data["errors"]){
if (data.errors[error] == "new") {
// we need to check for a context which is not a checkbox so we use to the parent element (which is div.pair)
var selector = (data.type == "group") ? data.element.first().parent() : data.element; // jquery 1.4.x
// var selector = (data.type == "group") ? data.element.parents() : data.element; // jquery 1.3.x
// did we set a tooltip?
if (!data.tooltip) {
data.tooltip = selector.tooltip({
content: function() {
// use the error message
return data.msg[error];
},
// ui.position settings
position: {
my: "left top",
at: "right top",
offset: "35 0",
of: selector
},
tooltipClass: "ui-widget-content",
noHover: true
});
data.tooltip.tooltip("show", selector); // para is target (of)
}
} else if (data.errors[error] == "corrected") {
data.tooltip.tooltip("close");
data.tooltip.tooltip("destroy");
data.tooltip = false;
}
}
}
});

});
</script>
</body>
</html>

0 comments on commit 7cf13bc

Please sign in to comment.