Question

I want to validate this form ignoring default values of input fields. I tried all possible ways with jQuery validate plugin. It’s hard to understand how to use it, since I’m a beginner to JS.

My form looks like that

<?php
require "core/code/includes/db.php";
if (mysqli_connect_errno()) {
        printf("Baza ilə əlaqədə problem var: %s\n Xahiş edirik administrator ilə əlaqə yaradasınız: [e-mail]", mysqli_connect_error());
        exit();
    }
?>
<form id="reg" method="post" action="core/code/functions/signup.php" onSubmit="return checkForm(this);">
<table width="270px" style="clear:both">
<tr>
<td class="numbers" rowspan="3">
1
</td>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Əsas məlumatlar 
</td>
</tr>
<tr>
 <td ><input class="part1 default required" type="text" name="fname" value="Adınız"  /></td>
  <td ><input  class="part1 default required"  type="text" name="mname"  value="Atanızın adı"/></td>
 <td ><input  class="part1 default" type="text" name="lname"  value="Soyadınız" /></td>
</tr>
...

...
<input class="button button-gray"  type="submit" value="Tamam" name="submit"/>
</p>
</form>
<script type="text/javascript" src="core/code/js/jquery-ui.js"></script>
<script src="core/code/js/mask.js"></script>
<script src="core/code/js/reg.js"></script>
<script type="text/javascript" src="core/code/js/acompl.js"></script>  

And reg.js

var defaultValues = {
    'fname': 'Adınız',
    'mname': 'Atanızın adı',
    'lname': 'Soyadınız',
    'phone': 'Telefon',
    'email': 'Email',
    'pwd':'Şifrə',
    'region':'Rayon',
    'school':'Məktəb',
    'login':'Istifadəçi adı',
    'class':'Sinif',
    'subject':'Fənnin adını daxil edin',
    'dob': 'Date of Birth'
};
$('input').live('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

$('input').live('blur', function() {
    var el = $(this);
    var name = el.attr('name');

    // Really we only want to do anything if the field is *empty*
    if (el.val().match(/^[\s\.]*$/)) {

        // To get our default style back, we'll re-add the classname
        el.addClass('default');

        // Unmask the 'dob' field
        if (name == 'dob') {
            el.unmask();
        }

        // And finally repopulate the field with its default value
        el.val(defaultValues[name]);
    }
});

Answer 1

First I think you should add an id to each form element. I don’t think jQuery will grab a DOM element with its name. Your form has an id but not your input elements.

So for example, see the input element below (the id can be same as the name):

<input class="part1 default required" type="text" name="pwd" id="pwd" value="Adınız"  />

Now you can grab that element via jQuery like this: alert($('#pwd').val());

The # before pwd indicates that the element is being selected by its id.
You could also select an element by referecing its class like this: alert($('.className').val()); but this will select all matching elements with the same class applied to them. To make a single and specific select; you should use ids.

So, if I understand your question right; you can validate the value of these elements by checking whether they have the default value or if they are empty first. Then checking other criterias such as password length, etc..

    $('#reg').submit(function (event) 
    {
        if ($('#pwd').val() == defaultValues['pwd'] || $.trim($('#pwd').val()) == '')
        {
            alert('Please enter a password!');
            return false;
        }
        else
        {
            if ($('#pwd').val().length < 8)
            {
                alert('Password must have 8 characters at least!');
                return false;
            }
        }
    });

Note: I agree with Jared. You should validate this form on the server-side too; since the code is visible in the browser and can easily be by-passed.