CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Jack
Jack

Reputation: 6600

jQuery Validator does not work

I have a Jquery form validator for my form, that is designed by bootstrap 3. Although similar code works here, my code does not work. I am really puzzled with the issue. What is going wrong in here? I can not find much difference. When I copy my code in fiddle it works but the html file does not!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script>
  $('form').validate({
    rules : {
      name : {
        minlength : 5,
        maxlength : 20,
        required : true
      },
      email : {
        minlength : 7,
        maxlength : 35,
        required : true
      },
      phone : {
        minlength : 10,
        maxlength : 14,
        required : false
      },
      recipient : {
        required : true
      }
    },
    highlight : function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight : function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement : 'span',
    errorClass : 'help-block',
    errorPlacement : function(error, element) {
      if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  });
</script>
</head>
<body>





        <form method="post" action="contact.htm">

          <div class="form-group">
            <div class="col-md-12">
              <input type="text" class="form-control" id="name" name="name"
                placeholder="Your name/Business name" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <input type="email" class="form-control" id="email" name="email"
                placeholder="Your email address" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <input type="phone" class="form-control" id="phone" name="phone"
                placeholder="Phone number" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <textarea class="form-control" rows="4" name="message"
                placeholder="Please enter your enquiry"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-4">
              <label for="recipient">Recipient:</label> <select
                class="form-control" id="recipient">
                <option value="staff">Opt1</option>
                <option value="editor">Opt2</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="human" class="col-md-4control-label">2 + 3 = ?</label>
            <div class="col-md-12">
              <input type="text" class="form-control" id="human" name="human"
                placeholder="Your Answer" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-2 " style="float: right;">
              <input id="submit" name="submit" type="submit" value="Send"
                class="btn btn-primary" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <! Will be used to display an alert to the user>
            </div>
          </div>
        </form>



</body>
</html>

Upvotes: 0

Views: 87

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You missed to include jquery validation script in your code. Read the documentation You can add it by CDN Url

Add the below after inclusion of jquery

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"> </script>

Also, you need to bind your validation code in $.ready() b'cos your DOM elements are loaded after your form validation initialisation which will not work. So try it like,

$(function(){
   $('form').validate({
      ...
   });
});

Upvotes: 1

Related Questions