"bootstrap 4.1 nice submit form with bootstrap validator"
Bootstrap 4.1.1 Snippet by luckmoshy

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css"/> <title>Hello, world!</title> </head> <body> <h1>Nice bootstrap 4 submit form <a href="webublogoverflow.blogspot.com">webublogoverflow</a></h1> <div class="container"> <form> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationServer013">First name</label> <input type="text" class="form-control is-valid" id="validationServer013" placeholder="First name" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4 mb-3"> <label for="validationServer023">Last name</label> <input type="text" class="form-control is-valid" id="validationServer023" placeholder="Last name" value="Otto" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4 mb-3"> <label for="validationServerUsername33">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend33">@</span> </div> <input type="text" class="form-control is-invalid" id="validationServerUsername33" placeholder="Username" aria-describedby="inputGroupPrepend33" required> <div class="invalid-feedback"> Please choose a username. </div> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationServer033">City</label> <input type="text" class="form-control is-invalid" id="validationServer033" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer043">State</label> <input type="text" class="form-control is-invalid" id="validationServer043" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer053">Zip</label> <input type="text" class="form-control is-invalid" id="validationServer053" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input is-invalid" id="invalidCheck33" required> <label class="custom-control-label" for="invalidCheck33">Agree to terms and conditions</label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> <div class="invalid-feedback"> You must agree before submitting. </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"/> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>

Related: See More

Vue Material Kit PRO
login-form
Login Form
Contact Form

Questions / Comments: