Question

I want to validate my registration form but i have default values for every text input. Tried all possible ways with jquery validate plugin. It’s hard to understand how to use it (I’m newbie to js) What i want to do, is ignore the default values and validate form. My form looks like that

<from id="reg">
<input class="part1 default" type="text" name="fname" id="fname" value="Adınız (First Name)"/>
<input  class="part1 default"  type="text" name="mname"  value="Atanızın adı (Middle name)"/>
</form>

I’m using this piece of code for this form

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]);
    }
});

/*validation*/
 $('#reg').submit(function (event) 
    {
        if ($('#fname').val() == defaultValues['Adınız'] || $.trim($('#pwd').val()) == '')
        {
            alert('Please enter the name!');
            return false;
        }
        else
        {
            if ($('#fname').val().length < 2)
            {
                alert('The name must be >2 letters!');
                return false;
            }
        }
    });

The last part as you see is the validation. I have a feq questions about it

1. Lets say we wrote if’s for all possible cases. What if allright and
   we want to continue submitting process? Do i need to write new if
   for it and end this if with “return true?”
2. I used this piece of code but it always gives me the same error
   message “Please enter a password!” even if all input fields are
   filled. How can we modify this code to alert the array of errors?
   for example if my pass is wrong type and name field unfilled the script will
   show 2 errors at once. I thought about logic too: For example every
   time when some case is true then it pushes to array the error
   message and when it finishes checking all cases, shows the error
   array. But can’t realise it.
   How to validate email field, and date of birth field (looks like “19.16.2010”)?

Answer 1

Instead of placing the default value in a “value” attribute, why not set it as the “placeholder”.

<input type="text" name="fname" id="fname" placeholder="Adınız (First Name)"/>

Then you can just do regular validation…