how to increase the progress bar value based on validations

Question

Hello i have the code like following.. In this i have validations... i used progress bar also.. for every validation if it is true then the progress bar value should increase by 10..if validation not performed well then the progress bar value should be at the same state..how to achieve this.. plz help me

Thank you

$('form').validate({
        rules: {
        name:{
            required:true,
                minlength:5
            },
        psd:{
                required:true,
                    minlength:6
            },
        repsd:{
                required:true,
                equalTo:'#pwd'
                },
        dob:{
                    required:true
                },
        email:{
                required:true,
                    email:true
        },
                address: {
                        required:true
                }
        },
            success:function(label){
                label.text('ok').addClass('valid');
        }
})

for progress bar i wrote like this.. ofcourse it is not work as per my desired condition

$('#progressdiv').progressbar();
    $('.same').blur(function(){
    $('#progressdiv').progressbar('value', i);
    i=i+10;
    })

Answer 1

Make sure you have a jQuery UI CSS. I removed alot of your other code for simplicity. HTML

<form name="f1" action="post" id="f1">
    <div id="mydiv1">
    <table id="mytab1">
    <tr>
    <td>
    <label for="name">UserName</label>
    </td>
    <td>
    <input class="same" type="text" value="UserName" name="name"/>
    </td>
    </tr>
    <tr>
    <td>
    <label for="password">Password</label>
    </td>
    <td>
    <input class="same" type="password" id="pwd" value="password" name="psd"/>
    </td>
    </tr>
    <tr>
    <td>
    <label for="confirmpsd">Retype password</label>
    </td>
    <td>
    <input class="same" type="password" value="re-type password" name="repsd" />
    </td>
    </tr>
    <tr>
    <td>
    <label for="dob">DateOfBirth</label>
    </td>
    <td>
    <input class="same" id="date" type="text" value="DD/MM/YYY" name="dob" />
    </td>
    </tr>
    <tr>
    <td>
    <label for="HighestEd">Highest qualification</label>
    </td>
    <td>
    <input class="same" type="text" value="qualification" name="hed"/>
    </td>
    </tr>
    <tr>
    <td>
    <label for="email">Email-id</label>
    </td>
    <td>
    <input type="text" class="same" value="Email-address" name="email"/>
    </td>
    </tr>
    <tr>
    <td>
    <label for="email">What you like to receive</label>
    </td>
    <td>
    <input type="checkbox" name="rec_type" class="checkall">Select all</td><tr>
    <tr>
    <td>
    </td>
    <td>
    <input type="checkbox" name="rec_type">Emails<br/>
    <input type="checkbox" name="rec_type">Notifications<br/>
    <input type="checkbox" name="rec_type">NewLetters<br/>
    </td>
    </tr>
    <tr>
    <td>
    <label for="address">Address</label>
    </td>
    <td>
    <textarea class="same" rows=7 cols=25 value="Type address" name="adrs"/></textarea>
    </td>
    </tr>
    </table>
    <input type="submit" id="buttonRegister" value="Register">
    <div id="divPercent">0%</div>
    <div id="progessdiv"></div>
    </div>
    </form>

jQuery

    validator = null;
    $(document).ready(function() {

       $(".same").blur(function(){
           updateProgress(validator);
       });

       $('#progessdiv').progressbar({value: 0});
       var validator = $('form').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 5
                },
                psd: {
                    required: true,
                    minlength: 6
                },
                repsd: {
                    required: true,
                    equalTo: '#pwd'
                },
                dob: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                address: {
                    required: true
                }
            },
            success: function(label) {
                label.text('ok').addClass('valid');
            },
            invalidHandler: function() {
                updateProgress(validator);
            }
        });
    });

function updateProgress(validator){
    var percentage = 0;
    if (validator != null){
        percentage = 100 - (validator.numberOfInvalids() * (100 / $('.same').length));
        $('#progessdiv').progressbar("option", "value", percentage);
        $('#divPercent').text(percentage + "%");
    }
}