2

フォームに jquery フォーム ウィザードを使用しています。これは複数ページのフォームです。以下の例をご覧ください: http://thecodemine.org/examples/example_1_straight.html

フォームは jquery 検証プラグインを使用しており、jquery.validation.jsには、パスワードの検証ルールやパスワードの再入力を確認するルールはありません。

他の多くの簡単な確認フォーム コードを試しましたが、フォーム ウィザードでは機能しません。これは複数ページのフォームであるため、次のボタンをクリックしたときに情報が渡されない可能性があります。

mootools を使用して検証すると、jquery フォーム ウィザードが機能しなくなります。

小さなカスタマイズの後に言及されている単純なコードを使用しようとしていますが、フォームでも機能しませんが、他の単純なフォームでは機能します。

私のページでこのスクリプトを使用する方法を教えてください。これは、上記のリンクの例とまったく同じです。

まず、値をフォーム ウィザードに渡してアニメーション フォームを作成します。コードは以下のとおりです。

   <script type="text/javascript">
        $(function(){
            $("#SignupForm").formwizard({ 
                formPluginEnabled: true,
                validationEnabled: true,
                focusFirstInput : true,
                formOptions :{
                    success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
                    beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
                    dataType: 'json',
                    resetForm: true
                }   
             }
            );
    });
</script>

以下は、フォームで使用しようとしている確認コードですが、機能しません

     <script type="text/javascript">
$(function(){

var pass1 = $('#password'),
    pass2 = $('#passwordConfirm'),
    email = $('#email'),
    form = $('#SignupForm'),
    strength = $('#strength'),
    arrow = $('#form-div .arrow');

// Empty the fields on load
$('#main .row input').val('');

// Handle form submissions
form.on('submit',function(e){

    // Is everything entered correctly?
    if($('#main .row.success').length == $('#main .row').length){

        // Yes!
        alert("Thank you for trying out this demo!");
        e.preventDefault(); // Remove this to allow actual submission

    }
    else{

        // No. Prevent form submission
        e.preventDefault();

    }
});

// Validate the email field
email.on('blur',function(){

    // Very simple validation
    if (!/^\S+@\S+\.\S+$/.test(email.val())){
        email.parent().addClass('error').removeClass('success');
    }
    else{
        email.parent().removeClass('error').addClass('success');
    }

});

// Use the complexify plugin on the first password field
pass1.complexify({minimumChars:7, strengthScaleFactor:0.4}, function(valid, complexity){

    if(valid){
        pass2.removeAttr('disabled');

        pass1.parent()
                .removeClass('error')
                .addClass('success');
    }
    else{
        pass2.attr('disabled','true');

        pass1.parent()
                .removeClass('success')
                .addClass('error');
    }



    var calculated = (complexity/100)*268-30;
    if(calculated <50){
    $('#strength').text('Very Weak');

    strength.removeClass('GreenJoy').addClass('RedWarn');

    }

    if(calculated >50 && calculated < 100){
    $('#strength').text('Weak');

    strength.removeClass('GreenJoy').addClass('RedWarn');

    }

    if(calculated >100 && calculated < 150){
    $('#strength').text('Normal');

    strength.removeClass('RedWarn').addClass('GreenJoy');

    }

    if(calculated >170 && calculated < 200){
    $('#strength').text('Good');

    strength.removeClass('RedWarn').addClass('GreenJoy');
    }

    if(calculated >235){
    $('#strength').text('Perfect!');

    strength.removeClass('RedWarn').addClass('GreenJoy');
    }


});

// Validate the second password field
pass2.on('keydown input',function(){

    // Make sure its value equals the first's
    if(pass2.val() == pass1.val()){

        pass2.parent()
                .removeClass('error')
                .addClass('success');
    }
    else{
        pass2.parent()
                .removeClass('success')
                .addClass('error');
    } 
});

 });

</script>
4

1 に答える 1

1

わかった：）

jquery.validate.jsにequalToの検証ルールがあります

パスワードの確認を取得するためにこれを行います

HTML

   <label for="password">Password</label>
<label for="password" id="strength" style="font-weight:normal"></label>
<input class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" name="password" id="password" type="password">

<label for="passwordConfirm">Retype password</label>

<input class="ui-wizard-content ui-helper-reset ui-state-default equalTo required" disabled="disabled" name="passwordConfirm" id="passwordConfirm" type="password">

JavaScript

  <script>
 $(document).ready(function(){
 $("#SignupForm").validate({
 rules: {
password: "required",
passwordConfirm: {
  equalTo: "#password"
}
}
});
 });
 </script>
于 2012-11-16T22:44:55.613 に答える