Search This Blog

Monday, December 17, 2018

Bootstrap Registration Form Sample

<html>
<head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
</head>
<body>
    <div class="container register">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Enter Your Details Here
                    </div>
                    <div class="panel-body">
                        <form name="myform">
                            <div class="form-group col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="myName">First Name *</label>
                                    <input id="myName" name="myName" class="form-control" type="text" data-validation="required">
                                    <span id="error_name" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="lastname">Last Name *</label>
                                    <input id="lastname" name="lastname" class="form-control" type="text" data-validation="email">
                                    <span id="error_lastname" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="age">Age *</label>
                                    <input id="age" name="age" class="form-control" type="number" min="1">
                                    <span id="error_age" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="dob">Date Of Birth *</label>
                                    <input type="date" name="dob" id="dob" class="form-control">
                                    <span id="error_dob" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="gender">Gender</label>
                                    <select name="gender" id="gender" class="form-control">
                                        <option selected>Male</option>
                                        <option>Female</option>
                                        <option>Other</option>
                                    </select>
                                    <span id="error_gender" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="phone">Phone Number *</label>
                                    <input type="text" id="phone" name="phone" class="form-control">
                                    <span id="error_phone" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="disc">Discription</label>
                                    <textarea class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-group col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="myName">First Name *</label>
                                    <input id="myName" name="myName" class="form-control" type="text" data-validation="required">
                                    <span id="error_name" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="lastname">Last Name *</label>
                                    <input id="lastname" name="lastname" class="form-control" type="text" data-validation="email">
                                    <span id="error_lastname" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="age">Age *</label>
                                    <input id="age" name="age" class="form-control" type="number" min="1">
                                    <span id="error_age" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="dob">Date Of Birth *</label>
                                    <input type="date" name="dob" id="dob" class="form-control">
                                    <span id="error_dob" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="gender">Gender</label>
                                    <select name="gender" id="gender" class="form-control">
                                        <option selected>Male</option>
                                        <option>Female</option>
                                        <option>Other</option>
                                    </select>
                                    <span id="error_gender" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="phone">Phone Number *</label>
                                    <input type="text" id="phone" name="phone" class="form-control">
                                    <span id="error_phone" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label for="disc">Discription</label>
                                    <textarea class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <button id="submit" type="submit" value="submit" style="background: -webkit-linear-gradient(left, #3931af, #00c6ff)" class="btn btn-primary center">Submit</button>

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

            </div>

        </div>
    </div>
    <script>
        $(document).ready(function () {
            $flag = 1;
            $("#myName").focusout(function () {
                if ($(this).val() == '') {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_name").text("* You have to enter your first name!");
                }
                else {
                    $(this).css("border-color", "#2eb82e");
                    $('#submit').attr('disabled', false);
                    $("#error_name").text("");

                }
            });
            $("#lastname").focusout(function () {
                if ($(this).val() == '') {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_lastname").text("* You have to enter your Last name!");
                }
                else {
                    $(this).css("border-color", "#2eb82e");
                    $('#submit').attr('disabled', false);
                    $("#error_lastname").text("");
                }
            });
            $("#dob").focusout(function () {
                if ($(this).val() == '') {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_dob").text("* You have to enter your Date of Birth!");
                }
                else {
                    $(this).css("border-color", "#2eb82e");
                    $('#submit').attr('disabled', false);
                    $("#error_dob").text("");
                }
            });
            $("#gender").focusout(function () {
                $(this).css("border-color", "#2eb82e");

            });
            $("#age").focusout(function () {
                if ($(this).val() == '') {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_age").text("* You have to enter your Age!");
                }
                else {
                    $(this).css({ "border-color": "#2eb82e" });
                    $('#submit').attr('disabled', false);
                    $("#error_age").text("");

                }
            });
            $("#phone").focusout(function () {
                $pho = $("#phone").val();
                if ($(this).val() == '') {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_phone").text("* You have to enter your Phone Number!");
                }
                else if ($pho.length != 10) {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_phone").text("* Lenght of Phone Number Should Be Ten");
                }
                else if (!$.isNumeric($pho)) {
                    $(this).css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_phone").text("* Phone Number Should Be Numeric");
                }
                else {
                    $(this).css({ "border-color": "#2eb82e" });
                    $('#submit').attr('disabled', false);
                    $("#error_phone").text("");
                }

            });

            $("#submit").click(function () {
                if ($("#myName").val() == '') {
                    $("#myName").css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_name").text("* You have to enter your first name!");
                }
                if ($("#lastname").val() == '') {
                    $("#lastname").css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_lastname").text("* You have to enter your Last name!");
                }
                if ($("#dob").val() == '') {
                    $("#dob").css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_dob").text("* You have to enter your Date of Birth!");
                }
                if ($("#age").val() == '') {
                    $("#age").css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_age").text("* You have to enter your Age!");
                }
                if ($("#phone").val() == '') {
                    $("#phone").css("border-color", "#FF0000");
                    $('#submit').attr('disabled', true);
                    $("#error_phone").text("* You have to enter your Phone Number!");
                }
            });



        });
    </script>
    <style type="text/css">
        .register {
            margin-top: 5%;
            padding: 2%;
        }

        .palel-primary {
            border-color: #bce8f1;
        }

        .panel-primary > .panel-heading {
            /*background:#bce8f1;*/
            background: -webkit-linear-gradient(left, #3931af, #00c6ff);
        }

        .panel-primary > .panel-body {
            background-color: #EDEDED;
        }
    </style>
</body>
</html>

No comments:

Post a Comment