1

As は、ステップで機能するフォームのテキスト フィールドを検証できます。

このリンクで例を見ることができるフォームを作成しましたhttp://jsfiddle.net/milindex/93j2bgmm/1/

質問と疑問:

  1. BoostrapValidator でテキスト フィールドを検証することは可能ですが、リンクを使用していますか?

ステップ 2 に進むリンクがあります。ユーザーがステップ 1 のフィールド テキストを完了していない場合は、次のステップ 2 に進むことができます。

これを回避できます。ユーザーがステップ 1 からテキスト フィールドを完了していないかどうかを検出し、BoostrapValidator によって検証する方法はありますが、そのリンクからです。

  1. ステップ 2 では、ユーザーはテキスト フィールドのステップ 1 を完了せずにフォームを送信できます。

注:ツール boostrapValidator を使用したいくつかの簡単な方法。

ヘルプ リソース:

http://bootstrapvalidator.com/settings/#event-form

コード例:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>


$(function() {

//Step function
$('#next_step_2').on("click",this,function(){
    $('.step_1').slideUp("fast");
    $('.step_2').slideDown("fast");
});

$('#previous_step_1').on("click",this,function(){
    $('.step_2').slideUp("fast");
    $('.step_1').slideDown("fast");
});


//Validate Form
$('#form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        names: {
            message: 'The Name is not valid',
            validators: {
                notEmpty: {
                    message: 'The Name is required and cannot be empty'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'The email is required and cannot be empty'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        phone: {
            message: 'The Phone is not valid',
            validators: {
                notEmpty: {
                    message: 'The Phone is required and cannot be empty'
                },
                integer: {
                    message: 'The value is not an integer'
                }
            }
        },
        country: {
            message: 'The Country is not valid',
            validators: {
                notEmpty: {
                    message: 'The Country is required and cannot be empty'
                }
            }
        }
    }
})
.on('success.form.bv', function(e) {
    alert("Thanks You!!!");
})

});

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <form name="form" class="form" id="form" method="post">


            <!--Step_1-->
            <div class="step_1">

                <legend>Step 1</legend> 

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Names</label>
                        <input type="text" id="names" name="names" class="form-control">
                    </div>
                </div>

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Email</label>
                        <input type="text" id="email" name="email" class="form-control">
                    </div>
                </div>


                <div class="col-xs-12">
                    <a href="javascript:void(0)" class="btn btn-primary" id="next_step_2">Next Step</a>
                </div>

            </div>
            <!--End Step_1-->




            <!--Step_2-->
            <div class="step_2" style="display:none">

                <legend>Step 2</legend> 

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Phone</label>
                        <input type="text" id="phone" name="phone" class="form-control">
                    </div>
                </div>

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Country</label>
                        <input type="text" id="country" name="country" class="form-control">
                    </div>
                </div>


                <div class="col-xs-12">
                    <a href="javascript:void(0)" class="btn btn-primary" id="previous_step_1">Previous Step</a>
                    <button type="submit" class="btn btn-success">SEND FORM</button>
                </div>

            </div>
            <!--End Step_2-->


        </form>
    </div>
</div>

あなたが私と同じことをする必要がある他の人を助けることができるように、私がこれを理解するのを手伝ってくれることを願っています.

どうもありがとうございました

4

1 に答える 1