DarksTeam Forum

Go Back   DarksTeam Forum > > > >

Reply
 
Thread Tools Display Modes
  (#1) Old
Dea7h Dea7h is online now
#NyxMu
 
Dea7h's Avatar
 
Posts: 1,054
Thanked 385 Times in 264 Posts
Mood: Amused
Join Date: Jan 2009
Location: Sweden, Stockholm
Default [Release] Universal Form Validation with Javascript (jQuery required) - 17-11-2017, 21:43

Hello everyone! I was writing some codes and I needed to write a form validation for my website. Decided to share it here with you and as it may be nothing new for the majority it may also come in handy for many.

The beauty of it is that you write it once and you can use it anywhere in any given form in your website without repeating a whole bunch of code every single time like the most websites do.

So here comes the main function that you need to put in your main javascript file
PHP Code:
$(document).ready(function () {
    $(
'.mainNoticer, .subNoticer').click(function () {
        $(
'.mainNoticer').fadeOut(200);
    });
});

function 
displayMessage($str$type 'error') {
    var 
$contain = $('.mainNoticer');
    var 
$message = $('.subNoticer');
    switch (
$type) {
        case 
'success':
            
$message.empty().append("<font style='color: #14972f;'>" $str "</font>");
            break;
        default:
            
$message.empty().append("<font style='color: #ff7c7c;'>" $str "</font>");
            break;
    }
    
$contain.fadeIn(500).css('display''flex');
}

function 
validate($form$array) {
    var 
$errors = [];

    $.
each($array, function ($name$rules) {
        $.
each($rules, function ($rule$rule_value) {
            var 
$value = $($form ' [name=' $name ']').val();
            switch (
$rule) {
                case 
'range':
                    if (
$value.length $rule_value[0]) {
                        
$errors.push("The <b>" $rules['name'] + "</b> cannot be shorter than <b>" $rule_value[0] + "</b> characters");
                    } else if (
$value.length $rule_value[1]) {
                        
$errors.push("The <b>" $rules['name'] + "</b> cannot be longer than <b>" $rule_value[1] + "</b> characters");
                    }
                    break;
                case 
'pattern':
                    var 
pattern = {
                        
ALP: /^[a-z]+$/i,
                        
NUM: /^[0-9]+$/,
                        
ALPNUM: /^[a-z0-9]+$/i,
                        
EMAIL: /^[a-z0-9._@-]+$/i
                    
};

                    if (!
pattern[$rule_value].test($value)) {
                        
$errors.push("The <b>" $rules['name'] + "</b> contains forbidden characters ");
                    }
                    break;
            }
        });
    });

    if (
jQuery.isEmptyObject($errors)) {
        return 
true;
    } else {
        for (
$i 0$errors_list ''$i $errors.length$i++) {
            
$errors_list += $errors[$i] + '<br />';
        }

        
displayMessage($errors_list);
        return 
false;
    }

then you should put these few lines of code in your index.php (or whatever it's called) file for the messages to show

PHP Code:
<div class="mainNoticer"><div class="subNoticer">#notice</div></div> 
and then some style for the message box, put that in your .css file

PHP Code:
.mainNoticer {
    
positionfixed;
    
width100%;
    
height100%;
    
top0;
    
left0;
    
backgroundrgba(0000.3);
    
font-size18px;
    
displaynone;
    
justify-contentcenter;
    
align-itemscenter;
}

.
subNoticer {
    
width600px;
    
heightauto;
    
padding10px;
    
border1px solid #2d0808;
    
border-radius10px;
    
background#620f0f;

and now to use it you need to do the following...

Let's say you wanna use it in your register file (even tough it works in any form like your character reset form, stats adder or whatever you like)

There are few things you need to do:

1st you need to change your "Submit" button like that:
Let's say you have something like
PHP Code:
<input type="submit" value="Register" /> 
It needs to become like that
PHP Code:
<input type="button" value="Register" onClick="check()" /> 
2nd you need to give your <form> an id, something like this:
PHP Code:
<form action="" method="post" id="register_form"
the important part of this is the id="register_form"

and 3rd you need to put this code in your register.php file to say to the validation what you want it to validate as it follows:
PHP Code:
<script type="text/javascript">
    function 
check() {
        if (
validate('#register_form', {
            
username: { //This stands for your input name attribute on each field (<input type="text" name="username">)
                
name: ['Username'], //This is just for the message output, you type whatever you want here
                
range: [410],
                
pattern: ['ALPNUM']
            },
            
password: {//Same with this one... (<input type="password" name="password">)
                
name: ['Password'],
                
range: [410],
                
pattern: ['ALPNUM']
            },
            
email: {
                
name: ['E-Mail Address'],
                
range: [535],
                
pattern: ['EMAIL']
            },
            
captcha: {
                
name: ['Captcha Code'],
                
range: [55],
                
pattern: ['ALPNUM']
            }
        })) {
            $(
'#register_form').submit(); //If everything is okay and all the fields are validated you submit the form
        
}
    }
</
script
The message output in just for the example it's not even near pretty, feel free to use your own message style whatever it might be...

For the moment there are just 2 validation criteria range and 4 patterns:
ALP = only letters are allowed
NUM = only numbers allowed
ALPNUM = numbers and letters
EMAIL = numbers, letters . - _ and @ are allowed

IMPORTANT you need jQuery (direct download link) for this to work (it's pretty much a must have in any website)

!!NOTICE!!! This is not a final validation, you still need to validate all the fields in your php code

If I have missed anything I will update the thread! I hope someone will have a use for it...
If anyone have any suggestions on how to make it better just let me know ;] Peace <3

Credits: Dea7h (mainly )


Reply With Quote
The Following User Says Thank You to Dea7h For This Useful Post:
NFmc (03-01-2018)
  (#2) Old
NFmc NFmc is offline
Banned
 
Posts: 11
Thanked 1 Time in 1 Post
Join Date: Dec 2017
Default 03-01-2018, 13:47

gg
Reply With Quote
  (#3) Old
RaFa RaFa is online now
Dirty south, mayne!
 
RaFa's Avatar
 
Posts: 731
Thanked 463 Times in 234 Posts
Mood: Psychedelic
Join Date: Jan 2009
Location: Bulgaria
[Release] Universal Form Validation with Javascript (jQuery required)
Default 08-01-2018, 14:44

If you're supporting only new web browsers (and you're kind of good with regex), you can use patterns

Tryit Editor v3.5
Reply With Quote
The Following User Says Thank You to RaFa For This Useful Post:
Dea7h (08-01-2018)
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump



Copyright ©2000 - 2018, vBulletin Solutions, Inc.

no new posts