Php Flow » Wordpress

Create Beautiful Word press Admin Form and Validate with Jquery

In This tutorial I will tell you how to create custom wordpress form layout and add client side validation based on Jquery.Word press provided css for FORM layout we will use those classes and we will create custom JavaScript validate method to validate form.
We will follow following steps:

Steps 1:We will create Form layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="settings" action ="" method="post" onsubmit="return validate();">
<?php
            echo '<table class="form-table" id="tbl_addsettings">';
            echo '<tbody>';
            echo'<tr class="form-field form-required">
                <th scope="row"><label for="setting_key">Constant <span class="description">(required)</span></label></th>
                <td><input type="text" name="setting_key" id="setting_key" style="width:25em" value="" aria-required="true" onblur="checkValidation(this)"></td>
                </tr>';
            echo'<tr class="form-field form-required">
                <th scope="row"><label for="type">Type <span class="description">(required)</span></label></th>
                <td><input type="text" name="type" id="type" style="width:25em" value="" aria-required="true" onblur="checkValidation(this)"></td>
                </tr>';
            echo'<tr class="form-field form-required">
                <th scope="row"><label for="key_order">Key Order <span class="description">(required)</span></label></th>
                <td><input type="text" name="key_order" id="key_order" style="width:25em" onblur="checkValidation(this)"></td>
                </tr>';
            echo '</tbody>';
            echo '</table>';
?>
<p class="submit"><input type="submit" name="addsetting" id="addsetting" class="button-primary" value="Add New Setting "></p>
</form>

Here we are using ‘form-required’ class to denotes require fields.We have added ‘validate()’ method on onsubmit form event.

Step 2:Now we will define javascript method to validate from.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function validate() {
    var flag=0;
    jQuery("#tbl_addsettings tr.form-required").each(function() {
        var id=jQuery(this).find("input").attr('id');
        var value = jQuery('#'+id).val();
        if(value=='' || value=='null'){
            jQuery(this).addClass('form-invalid');
            flag=1;
    }
    });
    if(flag)
    return false;
    else
    return true;
}
function checkValidation(val){
var id=val.id;
var value=val.value;

    if(value && value!=''){
    var par=jQuery('input#'+id).parent().parent();
        jQuery(par).removeClass('form-invalid');

        if(id=='user_email'){
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if( !emailReg.test( value ) ) {
                alert("The e-mail address isn’t correct");
            }
        }
    }

}

Result:

Did you enjoy this article? Share it!

About the Author:

Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>