CODEWITHSUNDEEP
javascriptvalidationtwitter-bootstrap
Harsh Bahua
Harsh Bahua

Reputation: 35

jQuery Bootstrap validation not working

I have used bootstrapValidator.js to validate my page, but I cannot validate my page. The validator download link is: https://github.com/nghuuphuoc/bootstrapvalidator. What is the possible error? Im using Netbeans as the IDE.

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
    <head>

        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="validator/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#RegisterForm').bootstrapValidator({
                    fields: {
                        firstName: {
                            validators: {
                                notEmpty: {
                                    message: 'The first name is required and cannot be empty'
                                }
                            }
           `enter code here`             },
                        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>

    </head>
    <body>
        <jsp:include page="header.jsp" flush="true" />
        <br>
        <br>

        <br>
        <br>
        <form id="RegisterForm" class="form-horizontal">
            <div class="form-group">
                <label class="col-md-3 control-label">Full name</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="firstName" />
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="lastName" />
                </div>
            </div>

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

            <div class="form-group">
                <label class="col-md-3 control-label">Gender</label>
                <div class="col-md-6">
                    <div class="radio">
                        <label><input type="radio" name="gender" value="male" /> Male</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="gender" value="female" /> Female</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="gender" value="other" /> Other</label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-3 col-md-8">
                    <button type="submit" class="btn btn-primary">Say hello</button>
                </div>
            </div>
        </form>
    </body>
</html>

Upvotes: 2

Views: 12860

Answers (1)

Sparky
Sparky

Reputation: 98718

Your problem is likely here, where you've included a jQuery plugin before jQuery itself...

<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

The Bootstrap Validator plugin is a jQuery plugin, so the jQuery library must be included first. Since it also depends on Bootstrap, it should probably come after that too...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>

Upvotes: 4

Related Questions