Form Validation With Bootstrap jQuery

Question

Can someone please help me with this code  I am using bootstrap for the form and trying to validate it with jQuery  Unfortunately  the form validation isn t telling me what I m doing wrong  I got the script from http   jqueryvalidation org documentation  and followed a tutorial for client-sided validation    lt  DOCTYPE html gt    lt html gt   lt head gt           lt meta charset  utf 8  gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt   lt script src  js jquery validate min js  gt  lt  script gt    Script found online           lt script gt                document  ready function                      contact-form   validate                               rules                    name                      minlength  2                    required  true                                    email                      required  true                    email  true                                    message                      minlength  2                    required  true                                                  highlight  function element                      element  closest   control-group   removeClass  success   addClass  error                                   success  function element                    element                  text  OK    addClass  valid                    closest   control-group   removeClass  error   addClass  success                                                        end document ready          lt  script gt        lt  head gt        lt div class  hero-unit  gt             lt h1 gt Contact Form lt  h1 gt   lt  br gt        lt form method  POST  action  contact-form-submission php  class  form-horizontal  id  contact-form  gt             lt div class  control-group  gt                 lt label class  control-label  for  name  gt Name lt  label gt                 lt div class  controls  gt                     lt input type  text  name  name  id  name  placeholder  Your name  gt                 lt  div gt             lt  div gt             lt div class  control-group  gt                 lt label class  control-label  for  email  gt Email Address lt  label gt                 lt div class  controls  gt                     lt input type  text  name  email  id  email  placeholder  Your email address  gt                 lt  div gt             lt  div gt           lt div class  control-group  gt                 lt label class  control-label  for  subject  gt Subject lt  label gt               lt div class  controls  gt                        lt select id  subject  name  subject  gt                           lt option value  na  selected    gt Choose One  lt  option gt                           lt option value  service  gt Feedback lt  option gt                           lt option value  suggestions  gt Suggestion lt  option gt                           lt option value  support  gt Question lt  option gt                           lt option value  other  gt Other lt  option gt                       lt  select gt               lt  div gt           lt  div gt           lt div class  control-group  gt                 lt label class  control-label  for  message  gt Message lt  label gt                 lt div class  controls  gt                     lt textarea name  message  id  message  rows  8  class  span5  placeholder  The message you want to send to us   gt  lt  textarea gt                 lt  div gt             lt  div gt             lt div class  form-actions  gt                 lt input type  hidden  name  save  value  contact  gt                 lt button type  submit  class  btn btn-success  gt Submit Message lt  button gt                lt button type  reset  class  btn  gt Cancel lt  button gt             lt  div gt         lt  form gt      lt  div gt              lt script src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt           lt script src  js bootstrap js  gt  lt  script gt         lt  body gt

User · Accepted Answer

I had your code setup on jsFiddle to try diagnose the problem.

http://jsfiddle.net/5WMff/

However, I don't seem to encounter your issue. Could you take a look and let us know?

HTML

<div class="hero-unit">
 <h1>Contact Form</h1> 
</br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
    <div class="control-group">
        <label class="control-label" for="name">Name</label>
        <div class="controls">
            <input type="text" name="name" id="name" placeholder="Your name">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email Address</label>
        <div class="controls">
            <input type="text" name="email" id="email" placeholder="Your email address">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="subject">Subject</label>
        <div class="controls">
            <select id="subject" name="subject">
                <option value="na" selected="">Choose One:</option>
                <option value="service">Feedback</option>
                <option value="suggestions">Suggestion</option>
                <option value="support">Question</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="message">Message</label>
        <div class="controls">
            <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
        </div>
    </div>
    <div class="form-actions">
        <input type="hidden" name="save" value="contact">
        <button type="submit" class="btn btn-success">Submit Message</button>
        <button type="reset" class="btn">Cancel</button>
    </div>
</form>

Javascript

$(document).ready(function () {

$('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        message: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
    }
});
});

User · Answer

Please try after removing divs from formor try to use onclick method on submit button

User · Answer

Check this library  it s completable with booth bootstrap 3 and bootstrap 4  jQuery   lt form gt       lt div class  form-group  gt           lt input class  form-control  data-validator  required min 4 max 10  gt       lt  div gt   lt  form gt    Javascript    document  on  blur     data-validator    function          new Validator   this

User · Answer

Here is a very simple and lightweight plugin for validation with Boostrap  you can use it if you like      https   github com wpic bootstrap validator js

User · Answer

You can get another validation on this tutorial    http   twitterbootstrap org bootstrap-form-validation  They use JQuery validation   jquery validate js  jquery validate min js  jquery-1 7 1 min js     And you ll get the source code there     lt form id  registration-form  class  form-horizontal  gt    lt h2 gt Sample Registration form  lt small gt  Fill up the forms to get register  lt  small gt  lt  h2 gt    lt div class  form-control-group  gt           lt label class  control-label  for  name  gt Your Name lt  label gt    lt div class  controls  gt             lt input type  text  class  input-xlarge  name  name  id  name  gt  lt  div gt    lt  div gt    lt div class  form-control-group  gt           lt label class  control-label  for  name  gt User Name lt  label gt    lt div class  controls  gt             lt input type  text  class  input-xlarge  name  username  id  username  gt  lt  div gt    lt  div gt    lt div class  form-control-group  gt           lt label class  control-label  for  name  gt Password lt  label gt    lt div class  controls  gt             lt input type  password  class  input-xlarge  name  password  id  password  gt    lt  div gt   lt  div gt   lt div class  form-control-group  gt               lt label class  control-label  for  name  gt  Retype Password lt  label gt   lt div class  controls  gt                 lt input type  password  class  input-xlarge  name  confirm password  id  confirm password  gt  lt  div gt   lt  div gt   lt div class  form-control-group  gt               lt label class  control-label  for  email  gt Email Address lt  label gt   lt div class  controls  gt                 lt input type  text  class  input-xlarge  name  email  id  email  gt  lt  div gt   lt  div gt   lt div class  form-control-group  gt               lt label class  control-label  for  message  gt Your Address lt  label gt   lt div class  controls  gt                 lt textarea class  input-xlarge  name  address  id  address  rows  3  gt  lt  textarea gt  lt  div gt   lt  div gt   lt div class  form-control-group  gt               lt label class  control-label  for  message  gt  Please agree to our policy lt  label gt   lt div class  controls  gt                lt input id  agree  class  checkbox  type  checkbox  name  agree  gt  lt  div gt   lt  div gt   lt div class  form-actions  gt               lt button type  submit  class  btn btn-success btn-large  gt Register lt  button gt               lt button type  reset  class  btn  gt Cancel lt  button gt  lt  div gt   lt  form gt    And The JQuery     lt script src  assets js jquery-1 7 1 min js  gt  lt  script gt    lt script src  assets js jquery validate js  gt  lt  script gt    lt script src  script js  gt  lt  script gt   lt script gt              addEventListener  load   prettyPrint  false                 document  ready function                   pre   addClass  prettyprint linenums                            Here is the live example of the code   http   twitterbootstrap org live bootstrap-form-validation   Check the full tutorial  http   twitterbootstrap org bootstrap-form-validation   happy coding

[javascript] Form Validation With Bootstrap (jQuery)

Examples related to javascript

Examples related to jquery

Examples related to forms

Examples related to validation

Examples related to twitter-bootstrap