Answered Formit - customValidators: is it possible to add class on input if success

166 Posts

profilneurotiker Reply #1, 11 years, 1 month ago

Hi there!

I'm working on a form with Formit 2.2.7 in MODX Revo 2.4.0

Within my form i have some custom valdators, because the inputs are "prefilled" as an information for the users what to enter.

The FormIt-call:

[[!FormIt?
&customValidators=`checkName`
&hooks=`spam,email,redirect` 
&emailTpl=`EmailChunk` 
&emailTo=`[email protected]` 
&redirectTo=`9` 
&validate=`name:checkName:required`
]]

The HTML-part:

Name 
<input id="name" name="name" type="text" value="[[!+fi.name:is=``:then=`Please enter your name`:else=`[[!+fi.name]]`]]" [[!+fi.error.name:notempty=`class="error" `]] onfocus="this.value='';" onblur="if (this.value=='') this.value='Please enter your name';" />

The custom validator "checkName":

<?php
if ($value == 'Please enter your name') {
$validator->addError($key,'Please enter your name');
}

else {
return $success;
}

So my question is if it's possible to add a css-class to "this" input, when it returns "success". I need this for css-styling, when the field is valid.

This question has been answered by profilneurotiker. See the first response.

discuss.answer

166 Posts

profilneurotiker Reply #2, 11 years, 1 month ago

ok, there's no need for that all.

I simplyfied my input like this:

Name 
<input placeholder="Please enter your name" id="name" name="name" type="text" value="[[!+fi.name]]" [[!+fi.error.name:notempty=`class="error" `]] />

and use the css-pseudo-element "placeholder" in my css:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

By using this I can get rid of my customValidators and the whole onblur-, onfocus-stuff.