Solved

Needing help getting bootstrap 3 validation to fire

Posted on 2016-07-31
2
58 Views
Last Modified: 2016-08-05
I brand new to bootstrap but not to web development and 3 days in, I need help with the validation.  I'm sure I'm missing something pretty basic, but I can't see it. It's really irritating as this is so much like the jquery validators that I use all the time.

I have a form, got a working example of validation and melded the two and nothing happens when I hit submit.  Form name matches with the validator, everything has its own form-group, fields have the form-control class, the links to the libraries are all resolving.  I've moved the js libraries from bottom of page to top and back again and still nothing.

My test page code is below - FYI, the real form has 3 adjacent columns (thank you Prasadh Baapaat) so that's why it's laid out the way it is. As always, thanks so much in advance for any assistance.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="" />

        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

        <!-- BootstrapValidator CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body  >
        <div class="container">
            <div class="row clearfix">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8  column col-sm-offset-0 col-md-offset-2 col-lg-offset-2">
                    <form data-toggle="validator" role="form" id="registration-form" method="POST" action="#">
                        <div class="row">
                            <div class="column col-xs-10 col-xs-offset-1">
                                <div class="column col-xs-12 col-md-6 form-group">
                                    <label class="control-label" for="fName">Your First Name</label>
                                    <input name="fName" id="fName" type="text" class="form-control" placeholder="Your First Name">
                                </div>
                                <div class="column col-xs-12 col-md-6 form-group">
                                    <label class="control-label" for="lName">Your Last Name</label>
                                    <input name="lName" id="lName"  type="text" class="form-control" placeholder="Your Last Name">
                                </div>
                                <div class="column col-xs-12 form-group">
                                    <label class="control-label" for=email">Your Email</label>
                                    <input type="text"  name="email" id="email" class="form-control" placeholder="Your Email">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column col-xs-10 col-xs-offset-1">
                                <div class="column col-xs-12 col-lg-12 form-group">
                                    <label class="control-label" for="loc">Choose Location</label>
                                    <select name="loc" id="loc" class="form-control">
                                        <option value="">Select Location --- </option>
                                        <option value="loc1">Location 1</option>
                                        <option value="loc2">Location 2</option>
                                        <option value="loc3">Location 3</option>
                                        <option value="loc4">Location 4</option>
                                        <option value="loc5">Location 5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column col-xs-10 col-xs-offset-1">
                                <div class="column col-xs-12 col-lg-12 form-group">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="confirmation" class="alert alert-success hidden">
                        <span class="glyphicon glyphicon-star"></span> Thank you for registering
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery and Bootstrap JS -->
        <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <!-- BootstrapValidator -->
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                var validator = $("#registration-form").bootstrapValidator({
                    feedbackIcons: {
                        valid: "glyphicon glyphicon-ok",
                        invalid: "glyphicon glyphicon-remove",
                        validating: "glyphicon glyphicon-refresh"
                    },
                    fields : {
                        fName : {
                            validators: {
                                notEmpty : {
                                    message : "Name is required"
                                },
                                stringLength : {
                                    min: 2,
                                    message: "Name must be at least 2 characters long"
                                },
                            }
                        },

                        email :{
                            message : "Email address is required",
                            validators : {
                                notEmpty : {
                                    message : "Please provide an email address"
                                },
                                stringLength: {
                                    min : 6,
                                    max: 35,
                                    message: "Email address must be between 6 and 35 characters long"
                                },
                                emailAddress: {
                                    message: "Email address was invalid"
                                }
                            }
                        },
                    }
                });

                validator.on("success.form.bv", function (e) {
                    e.preventDefault();
                    $("#registration-form").addClass("hidden");
                    $("#confirmation").removeClass("hidden");
                });

            });
        </script>
    </body>
</html>

Open in new window

0
Comment
Question by:saabStory
2 Comments
 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
ID: 41738784
Hi,
you have applied half the things in the form validator to your form... please read the form validator page AGAIN and go thru the examples carefully and you will understand .

here I am giving example code for your EMAIL field...

<input type="text"  name="email" id="email" class="form-control" placeholder="Your Email" data-error="Bruh, that email address is invalid" required><div class="help-block with-errors"></div>

Open in new window


use it in place of your code...

NOTE: I have added the data-error markup AND a DIV to show the error...

I hope this example will guide/help you to get your form validated properly.

let me know if you dont understand anything.

thanks,
Prasadh
0
 

Author Closing Comment

by:saabStory
ID: 41744897
Thanks - sorry for the delay in responding - we've been shorthanded all week long.  Turns out my biggest problem was an ID10T error.  I didn't realize that I has using the wrong library to try to validate against - once I sorted that out and got the later version of that library, everything worked extremely well and I was able to expand on  your earlier expertise to enhance my form even further.  Thanks so much once again.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this article, I will show you HOW TO: Install VMware Tools for Windows on a VMware Windows virtual machine on a VMware vSphere Hypervisor 6.5 (ESXi 6.5) Host Server, using the VMware Host Client. The virtual machine has Windows Server 2016 instal…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now