[primefaces] r9840 committed - Implemented instant client side validation via p:clientValidator behav...

[prime...@googlecode.com]

Revision: 9840
Author: cagatay...@gmail.com
Date: Fri Aug 16 01:23:42 2013
Log: Implemented instant client side validation via p:clientValidator
behavior, enables using custom events like change, keyup to trigger
validaiton without waiting for a button-link to submit a form.
http://code.google.com/p/primefaces/source/detail?r=9840

Added:
/primefaces/trunk/src/main/java/org/primefaces/behavior/validate

/primefaces/trunk/src/main/java/org/primefaces/behavior/validate/ClientValidator.java
Modified:

/primefaces/trunk/src/main/java/org/primefaces/behavior/confirm/ConfirmBehavior.java

/primefaces/trunk/src/main/resources/META-INF/resources/primefaces/validation/validation.js
/primefaces/trunk/src/main/resources-maven-jsf/standard-facelets-taglib.xml
/primefaces/trunk/src/main/resources-maven-jsf/standard-faces-config.xml

=======================================
--- /dev/null
+++
/primefaces/trunk/src/main/java/org/primefaces/behavior/validate/ClientValidator.java
Fri Aug 16 01:23:42 2013
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2009-2013 PrimeTek.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.primefaces.behavior.validate;
+
+import javax.faces.component.UIComponent;
+import javax.faces.component.behavior.ClientBehaviorBase;
+import javax.faces.component.behavior.ClientBehaviorContext;
+import javax.faces.context.FacesContext;
+
+public class ClientValidator extends ClientBehaviorBase {
+
+ private String event;
+
+ @Override
+ public String getScript(ClientBehaviorContext behaviorContext) {
+ FacesContext context = behaviorContext.getFacesContext();
+ UIComponent component = behaviorContext.getComponent();
+ String source = component.getClientId(context);
+
+ return "PrimeFaces.vi('" + source + "')";
+ }
+
+ public String getEvent() {
+ return event;
+ }
+ public void setEvent(String event) {
+ this.event = event;
+ }
+}
=======================================
---
/primefaces/trunk/src/main/java/org/primefaces/behavior/confirm/ConfirmBehavior.java
Tue Aug 13 14:40:48 2013
+++
/primefaces/trunk/src/main/java/org/primefaces/behavior/confirm/ConfirmBehavior.java
Fri Aug 16 01:23:42 2013
@@ -1,11 +1,11 @@
/*
- * Copyright 2013 jagatai.
+ * Copyright 2009-2013 PrimeTek.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
- * http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
=======================================
---
/primefaces/trunk/src/main/resources/META-INF/resources/primefaces/validation/validation.js
Fri Aug 16 00:08:16 2013
+++
/primefaces/trunk/src/main/resources/META-INF/resources/primefaces/validation/validation.js
Fri Aug 16 01:23:42 2013
@@ -403,10 +403,14 @@
}
}
};
-
+
PrimeFaces.vb = function(cfg) {
return this.validate(cfg);
}
+
+ PrimeFaces.vi = function(element) {
+ this.validateInstant(element);
+ }

PrimeFaces.validate = function(cfg) {
var mc = PrimeFaces.util.MessageContext,
@@ -438,71 +442,100 @@
}
else {
mc.renderMessages(form.find('div.ui-messages'),
form.find('div.ui-message'));
-
return false;
}
}

PrimeFaces.validateInputs = function(inputs) {
- var mc = PrimeFaces.util.MessageContext;
-
for(var i = 0; i < inputs.length; i++) {
- var inputElement = inputs.eq(i),
- submittedValue = inputElement.val(),
- clientId = inputElement.attr('id'),
- value = submittedValue,
- valid = true,
- converterId = inputElement.data('p-con');
+ this.validateInput(inputs.eq(i));
+ }
+ }
+
+ PrimeFaces.validateInput = function(element) {
+ var mc = PrimeFaces.util.MessageContext,
+ submittedValue = element.val(),
+ clientId = element.attr('id'),
+ value = submittedValue,
+ valid = true,
+ converterId = element.data('p-con');

- if(converterId) {
- try {
- value =
PrimeFaces.converter[converterId].convert(inputElement);
- }
- catch(ce) {
- var converterMessageStr = inputElement.data('p-cmsg'),
- converterMsg = (converterMessageStr) ?
{summary:converterMessageStr,detail:converterMessageStr} : ce;
- valid = false;
- mc.addMessage(clientId, converterMsg);
- }
+ if(converterId) {
+ try {
+ value = PrimeFaces.converter[converterId].convert(element);
}
-
- if(valid && inputElement.data('p-required') && submittedValue
=== '') {
- var requiredMessageStr = inputElement.data('p-rmsg'),
- requiredMsg = (requiredMessageStr) ?
{summary:requiredMessageStr,detail:requiredMessageStr} :
mc.getMessage('javax.faces.component.UIInput.REQUIRED',
mc.getLabel(inputElement));
- mc.addMessage(clientId, requiredMsg);
-
+ catch(ce) {
+ var converterMessageStr = element.data('p-cmsg'),
+ converterMsg = (converterMessageStr) ?
{summary:converterMessageStr,detail:converterMessageStr} : ce;
valid = false;
+ mc.addMessage(clientId, converterMsg);
}
+ }

- if(valid && ((submittedValue !== '')||
PrimeFaces.settings.validateEmptyFields)) {
- var validatorIds = inputElement.data('p-val');
- if(validatorIds) {
- validatorIds = validatorIds.split(',');
+ if(valid && element.data('p-required') && submittedValue === '') {
+ var requiredMessageStr = element.data('p-rmsg'),
+ requiredMsg = (requiredMessageStr) ?
{summary:requiredMessageStr,detail:requiredMessageStr} :
mc.getMessage('javax.faces.component.UIInput.REQUIRED',
mc.getLabel(element));
+ mc.addMessage(clientId, requiredMsg);

- for(var j = 0; j < validatorIds.length; j++) {
- var validatorId = validatorIds[j],
- validator = PrimeFaces.validator[validatorId];
+ valid = false;
+ }

- if(validator) {
- try {
- validator.validate(inputElement, value);
- }
- catch(ve) {
- var validatorMessageStr =
inputElement.data('p-vmsg'),
- validatorMsg = (validatorMessageStr) ?
{summary:validatorMessageStr,detail:validatorMessageStr} : ve;
- valid = false;
- mc.addMessage(clientId, validatorMsg);
- }
+ if(valid && ((submittedValue !== '')||
PrimeFaces.settings.validateEmptyFields)) {
+ var validatorIds = element.data('p-val');
+ if(validatorIds) {
+ validatorIds = validatorIds.split(',');
+
+ for(var j = 0; j < validatorIds.length; j++) {
+ var validatorId = validatorIds[j],
+ validator = PrimeFaces.validator[validatorId];
+
+ if(validator) {
+ try {
+ validator.validate(element, value);
+ }
+ catch(ve) {
+ var validatorMessageStr =
element.data('p-vmsg'),
+ validatorMsg = (validatorMessageStr) ?
{summary:validatorMessageStr,detail:validatorMessageStr} : ve;
+ valid = false;
+ mc.addMessage(clientId, validatorMsg);
}
}
}
}
+ }

- if(!valid)
- inputElement.addClass('ui-state-error');
- else
- inputElement.removeClass('ui-state-error');
+ if(!valid)
+ element.addClass('ui-state-error');
+ else
+ element.removeClass('ui-state-error');
+ }
+
+ PrimeFaces.validateInstant = function(id) {
+ var mc = PrimeFaces.util.MessageContext,
+ element = $(PrimeFaces.escapeClientId(id)),
+ clientId = element.attr('id'),
+ uiMessageId = element.data('uiMessageId'),
+ uiMessage = null;
+
+ if(uiMessageId) {
+ uiMessage = $(PrimeFaces.escapeClientId(uiMessageId));
}
+ else {
+ uiMessage = mc.findUIMessage(clientId,
element.closest('form').find('div.ui-message'));
+ element.data('uiMessageId', uiMessage.attr('id'));
+ }
+
+ if(uiMessage) {
+ uiMessage.html('').removeClass('ui-message-error
ui-message-icon-only ui-widget ui-corner-all ui-helper-clearfix');
+ }
+
+ this.validateInput(element);
+
+ if(!mc.isEmpty()) {
+ mc.renderUIMessage(uiMessage, mc.messages[clientId][0]);
+ }
+
+ mc.clear();
}

PrimeFaces.util.MessageContext = {
@@ -556,15 +589,15 @@
renderMessages: function(uiMessages, uiMessageCollection) {
uiMessageCollection.html('').removeClass('ui-message-error
ui-message-icon-only ui-widget ui-corner-all ui-helper-clearfix');

- var shouldRenderUIMessages =
uiMessages.length&&!uiMessages.data('global');
+ var shouldRenderUIMessages =
uiMessages&&uiMessages.length&&!uiMessages.data('global');
if(shouldRenderUIMessages) {
uiMessages.html('');
uiMessages.append('<div class="ui-messages-error
ui-corner-all"><span
class="ui-messages-error-icon"></span><ul></ul></div>');
+
+ var messageList = uiMessages.find('> .ui-messages-error >
ul'),
+ showSummary = uiMessages.data('summary'),
+ showDetail = uiMessages.data('detail');
}
-
- var messageList = uiMessages.find('> .ui-messages-error > ul'),
- showSummary = uiMessages.data('summary'),
- showDetail = uiMessages.data('detail');

for(var clientId in this.messages) {
var msgs = this.messages[clientId],
@@ -586,20 +619,7 @@
}

if(uiMessage.length) {
- uiMessage.addClass('ui-message-error ui-widget
ui-corner-all ui-helper-clearfix');
- var display = uiMessage.data('display');
-
- if(display === 'both') {
- uiMessage.append('<span
class="ui-message-error-icon"></span>')
- .append('<span
class="ui-message-error-detail">' + msg.detail + '</span>');
- }
- else if(display === 'text') {
- uiMessage.append('<span
class="ui-message-error-detail">' + msg.detail + '</span>');
- }
- else if(display === 'icon') {
- uiMessage.addClass('ui-message-icon-only')
- .append('<span
class="ui-message-error-icon" title="' + msg.detail + '"></span>');
- }
+ this.renderUIMessage(uiMessage, msg);
}
}
}
@@ -607,6 +627,23 @@
this.clear();
},

+ renderUIMessage: function(uiMessage, msg) {
+ uiMessage.addClass('ui-message-error ui-widget ui-corner-all
ui-helper-clearfix');
+ var display = uiMessage.data('display');
+
+ if(display === 'both') {
+ uiMessage.append('<span
class="ui-message-error-icon"></span>')
+ .append('<span class="ui-message-error-detail">' +
msg.detail + '</span>');
+ }
+ else if(display === 'text') {
+ uiMessage.append('<span class="ui-message-error-detail">'
+ msg.detail + '</span>');
+ }
+ else if(display === 'icon') {
+ uiMessage.addClass('ui-message-icon-only')
+ .append('<span class="ui-message-error-icon"
title="' + msg.detail + '"></span>');
+ }
+ },
+
findUIMessage: function(clientId, uiMessageCollection) {
for(var i = 0; i < uiMessageCollection.length; i++) {
var uiMessage = uiMessageCollection.eq(i);
=======================================
---
/primefaces/trunk/src/main/resources-maven-jsf/standard-facelets-taglib.xml
Fri Aug 2 06:40:15 2013
+++
/primefaces/trunk/src/main/resources-maven-jsf/standard-facelets-taglib.xml
Fri Aug 16 01:23:42 2013
@@ -296,3 +296,16 @@
<type>java.lang.String</type>
</attribute>
</tag>
+
+ <tag>
+ <tag-name>clientValidator</tag-name>
+ <behavior>
+
<behavior-id>org.primefaces.behavior.ClientValidator</behavior-id>
+ </behavior>
+ <attribute>
+ <description>Event to trigger the validation.</description>
+ <name>event</name>
+ <required>false</required>
+ <type>java.lang.String</type>
+ </attribute>
+ </tag>
=======================================
---
/primefaces/trunk/src/main/resources-maven-jsf/standard-faces-config.xml
Thu Aug 15 01:51:00 2013
+++
/primefaces/trunk/src/main/resources-maven-jsf/standard-faces-config.xml
Fri Aug 16 01:23:42 2013
@@ -51,6 +51,11 @@

<behavior-class>org.primefaces.behavior.confirm.ConfirmBehavior</behavior-class>
</behavior>

+ <behavior>
+ <behavior-id>org.primefaces.behavior.ClientValidator</behavior-id>
+
<behavior-class>org.primefaces.behavior.validate.ClientValidator</behavior-class>
+ </behavior>
+
<factory>

<faces-context-factory>org.primefaces.context.PrimeFacesContextFactory</faces-context-factory>
</factory>