How to increase the value of the progress bar based on validation

Question

Hi, I have a code like the following. In this case, I have checks ... I also used a progress bar ... for each check, if true, the progress bar should increase by 10 .. If the test fails, the progress bar should be in the same state . How to achieve this .. plz help me

thank

$('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 the progress bar that I wrote like this .. of course it doesn’t work according to my desired condition

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

Answer 1

Make sure you have jQuery UI CSS. For simplicity, I deleted a lot of other code. 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 + "%");
    }
}