Question

您好我有以下代码.. 在这里我有验证...我也使用了进度条..对于每次验证，如果它是真的那么进度条值应该增加10 ..如果验证没有很好地执行，那么进度条值应该处于相同的状态。 .how实现这一点.. PLZ帮助我

谢谢

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

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

1 个答案: