Speed up development with full-stack environments for every branch.

Learn More

Submit Form using Bootstrap [PHP]

Forked from Hello World.

5691 Runs 19312 Views 8110 Copies

Bootstrap validation form

Saved

Saved

marwein 6

marwein
published 2 years ago

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Form Validation</title>

    <!-- 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" />-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/formValidation.css"/>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/formValidation.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="page-header">
                    <h2>Formulaire d'inscription</h2>
                </div>

                <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Nom complet</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="firstName" placeholder="Nom" />
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="lastName" placeholder="Prenom" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Login</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Adresse mail</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="email" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Mot de passe</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" name="password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Sexe</label>
                        <div class="col-sm-6">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" value="male" /> Homme
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" value="female" /> Femme
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label" id="captchaOperation"></label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="captcha" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-3">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="agree" value="agree" /> Accepter nos conditions
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
                            <button type="submit" class="btn btn-success" name="signup" value="Sign up">valider</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#defaultForm').formValidation({
        message: 'This value is not valid',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-sm-4',
                validators: {
                    notEmpty: {
                        message: 'Nom obligatoire'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'Le nom ne peux contenir que des caracteres alphabetique'
                    }
                }
            },
            lastName: {
                row: '.col-sm-4',
                validators: {
                    notEmpty: {
                        message: 'Prenom obligatoire'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'Le prenom ne peux contenir que des caracteres alphabetique'
                    }
                }
            },
            username: {
                message: 'Login invalide',
                validators: {
                    notEmpty: {
                        message: 'Login obligatoire'
                    },
                    stringLength: {
                        min: 6,
                        max: 15,
                        message: 'Le login doit contenir entre 6 et 15 caracteres'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: 'Le login ne peux contenir que des caracteres alpha-numerique'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Mail obligatoire'
                    },
                    regexp: {
                        regexp: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i,
                        message: 'Adresse mail invalide'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'Mot de passe obligatoire'
                    },
                    different: {
                        field: 'username',
                        message: 'Le mot de passe doit etre different du login'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'Le sexe est obligatoire'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Mauvaise reponse',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'Vous devez accepter nos conditions pour continuer'
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).