Store
Community Documentation

v3 Knowledgebase

Beautify your Registration Form Validation using CSS

Read below to see how to add CSS validation as seen in the image below:



As an example, if view the HTML source of phpfox login page or your login page (this should be yoursite.com/user/register), you will notice the following code in the javascript function Validation_js_form()
which is meant to highlight fields which failed the form validation test:

 $('#full_name').addClass('alert_input');

 $('#email').addClass('alert_input'); 

 /* and so on */ 


The code above does not work. In my opinion it is because the function Validation_js_form() is executed before the page is loaded after the validation so those changes are never reflected.

So how do we add CSS form validation?


Working Assumptions

1. Knowledge of how to add custom fields is assumed. You can view the video tutorial or search the Knowledgebase for more information on how to do this.

2. Knowledge of how to add error messages for the custom fields created is assumed. This is done through the Phrase Manager. (AdminCP->Extensions->Add Phrase/ Phrase Manager)

3. It is assumed that your registration form validation is working and you simply need to add css changes.

4. I am sure there are better methods to accomplish what we are about to do so please add your comments.


The Sample CSS files

Please find attached sample css file and images used and add to the css and folders of your theme respectively.
( upload/theme/frontend/theme_name/style/theme_name/css and
upload/theme/frontend/theme_name/style/theme_name/image/)


Adding CSS files

Go to yoursite.com/user/register/ and view the HTML source.
Search for Validation_js_form.
This is the code we shall be referring to below so please keep it open.

The HTML source should look like:


Editing the HTML

Open module/user/template/theme_name/block/register/step1.html.php and optionally module/user/template/theme_name/block/register/step2.html.php depending on how you have configured your registration form.

Add the following code next to the required fields found in both or any of the files.

For example, for the full name field, the code will change from:

<input type="text" name="val[full_name]" id="full_name"
class="input1 fl" value="{value type='input'
id='full_name'}"/>


to:



Note that the id of the link is the id_of_the_field_error

Repeat this for all the fields you would like to validate that are found in step1.html.php and step2.html.php.


Editing the jQuery code

Since the code
.addClass('alert_input');
is not working in the yoursite.com/user/register/, we will to put it where it will work, so keep the HTML source open.

Open module/user/static/jscript/register.js in your editor.

After the line:
$('#js_signup_error_message').html('');


Add the following code:

$('#full_name_error').attr('class', '');


Repeat this for all the fields that you would like validated. Note that
#full_name_error
is the id of the link added next to the field to be validated.

After the line:
$('#js_registration_process').show();


Add the following code:


if ($('#full_name').val() == '')
{
$('#full_name_error').addClass('redicon');
}


Note that
if ($('#full_name').val() == '') 
is the code that was used to validate the same field in yoursite.com/user/register/ as seen in the HTML source (Refer to the HTML source image above. See sections highlighted in blue) .

Repeat for all the other fields, for example:

if ($('#full_name').val() == '')
{
$('#full_name_error').addClass('redicon');
}

if ($('#password').val().length < 4 )
{
$('#password_error').addClass('redicon');
}
if ($('#email').val().search(/^[0-9a-zA-Z]([\-.\w]*[0-9a-zA-Z]?)*@([0-9a-zA-Z][\-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,}$/) == -1)
{ $('#email_error').addClass('redicon');}

if ($('#email').val().length > 100)
{
$('#email_error').addClass('redicon');
}

if ($('#password').val().length < 4 )
{
$('#password_error').addClass('redicon');
}

if ($('#password').val().length >30 )
{
$('#password_error').addClass('redicon');
}

if (!$('#agree').get(0).checked)
{
$('#agree_error').addClass('redicon');
}

if ($('#image_verification').val() == '')
{
$('#image_verification_error').addClass('redicon');
}


Save , FTP and clear the cache from the admin panel and from your browser cache.
Refresh. You should see the changes.

Extra Tips:

If you would like to remove the
.addClass('alert_input');
code that appears in all forms, open: include/phpfox/validator/validator.class.php .
Look for the function _createIfJS. Comment out the lines which have:
addClass(\'alert_input\');

Warning: This will affect all the forms in the system.