zoukankan      html  css  js  c++  java
  • BootstrapValidator demo

    source:http://bv.doc.javake.cn/api/

     

    BootstrapValidator is the best jQuery plugin to validate form fields, designed to use with Bootstrap 3.

     

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

    <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
    <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.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>

    <script>
    $(document).ready(function() {
        $('#tryitForm').bootstrapValidator({
            fields: {
                firstName: {
                    validators: {
                        notEmpty: {
                            message: 'The first name is required and cannot be empty'
                        }
                    }
                },
                lastName: {
                    validators: {
                        notEmpty: {
                            message: 'The last name is required and cannot be empty'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
                gender: {
                    validators: {
                        notEmpty: {
                            message: 'The gender is required'
                        }
                    }
                }
            },
            submitHandler: function(validator, form, submitButton) {
                var fullName = [validator.getFieldElements('firstName').val(),
                                validator.getFieldElements('lastName').val()].join(' ');
                $('#helloModal')
                    .find('.modal-title').html('Hello ' + fullName).end()
                    .modal();
            }
        });
    });
    </script>

     

  • 相关阅读:
    CSS之链接
    CSS之文本
    CSS之定位
    django 第四天
    django第三天
    django 第二天
    django第一天
    国庆贺礼
    珂朵莉树(ODT)笔记
    20190927
  • 原文地址:https://www.cnblogs.com/sdream/p/5464747.html
Copyright © 2011-2022 走看看