githab
/
bootstrapvalidator


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- form: -->
        <section>
            <div class="col-lg-8 col-lg-offset-2">
                <div class="page-header">
                    <h2>Contact</h2>
                </div>

                <form id="contactForm" method="post" class="form-horizontal" action="target.php"
                      data-bv-message="This value is not valid"
                      data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                      data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                      data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Full name <sup>*</sup></label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="firstName" placeholder="First name" required data-bv-notempty-message="The first name is required" />
                        </div>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="lastName" placeholder="Last name" required data-bv-notempty-message="The last name is required" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">Company <sup>*</sup></label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="company"
                                   required data-bv-notempty-message="The company name is required" />
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-link" data-toggle="#jobInfo">Add more info</button>
                        </div>
                    </div>

                    <div id="jobInfo" style="display: none;">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Job title <sup>*</sup></label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="job"
                                       required data-bv-notempty-message="The job title is required" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">Department <sup>*</sup></label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="department"
                                       required data-bv-notempty-message="The department name is required" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">Mobile phone <sup>*</sup></label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="mobilePhone"
                                   required data-bv-notempty-message="The mobile phone number is required"
                                   data-bv-digits data-bv-digits-message="The mobile phone number is not valid" />
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-link" data-toggle="#phoneInfo">Add more phone numbers</button>
                        </div>
                    </div>

                    <div id="phoneInfo" style="display: none;">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Home phone</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="homePhone"
                                       data-bv-digits data-bv-digits-message="The home phone number is not valid" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">Office phone</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="officePhone"
                                       data-bv-digits data-bv-digits-message="The office phone number is not valid" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" class="btn btn-primary btn-lg">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- :form -->
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('button[data-toggle]').on('click', function() {
        var $target = $($(this).attr('data-toggle'));
        $target.toggle();
        if (!$target.is(':visible')) {
            // Enable the submit buttons in case additional fields are not valid
            $('#contactForm').data('bootstrapValidator').disableSubmitButtons(false);
        }
    });

    $('#contactForm').bootstrapValidator();
});
</script>
</body>
</html>