jquery - 如何根据验证增加进度条值

Question

您好，我有如下代码..在此我有验证...我也使用了进度条..对于每个验证，如果它是 true 那么进度条值应该增加 10..如果验证执行得不好那么进度条值应该处于相同的状态。 .如何实现这一目标..请帮助我

谢谢

$('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');
        }
})

对于进度条，我是这样写的..当然它不能按照我想要的条件工作

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

Answer 1

确保您有 jQuery UI CSS。为了简单起见，我删除了您的许多其他代码。 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 + "%");
    }
}