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.Wordpress provided css for FORM layout we will use those classes and we will create custom JavaScript validate method to validate form.

You can also check other tutorial of wordpress,

How to Validate Custom forms with jQuery in WordPress


Steps 1:We will create Form layout

Select Code
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.

Select Code
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: