How to validate Forms live using javascript and bootstrap

How-to-validate-Forms-live-using-javascript-and-bootstrap

How to validate Forms live using javascript and bootstrap

STEP:1 :- Open an editor, paste the following code and save it in .html file or the extension you want to save .

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/darkly/bootstrap.min.css'>
  <script src='http://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
  <script src='http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js'></script>
  <style type="text/css">
    .container {
  margin-top: 20px;
}

.panel-heading {
  font-size: larger;
}

.alert {
  display: none;
}

/**
 * Error color for the validation plugin
 */
.error {
  color: #e74c3c;
}

  </style>
 
</head>

<body style="background-color: #02061f">
  <div class="container">
  <div class="panel panel-default" style="background-color: black">
    <div class="panel-heading">
      How to validate Forms live using javascript and bootstrap
    </div>
    <div class="panel-body">
      <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Successfully submitted!</strong> The form is valid.
      </div>
      <form role="form">
        <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" class="form-control" id="name" name="name">
        </div>
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email" name="email">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
   
</div>
</div>

   

   <script type="text/javascript">
    var $form = $("form"),
  $successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
  return this.optional(element) || value == value.match(/^[a-zA-Zs]*$/);
});
$form.validate({
  rules: {
    name: {
      required: true,
      minlength: 3,
      letters: true
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name (only letters and spaces are allowed)",
    email: "Please specify a valid email address"
  },
  submitHandler: function() {
    $successMsg.show();
  }
});
  </script>
</body>
</html>

 

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy