javascript - bootstrap validator submit handle -
i using bootstrap validator validate form created bootstrap. have used bootstrapvalidator function validate form , built in submithandle of function. in submithandle, using post method can see.
major problem not able submit form after clicking submit button.you can run code snippet , can see after hitting submit button,it stuck , if change of above field , click submit again works fine. not able make work on first attempt. not able find bug....any appreciated. thanks!!
$(document).ready( function() { var validator = $("#registration-form").bootstrapvalidator({ live: 'enabled', feedbackicons: { //valid: 'glyphicon glyphicon-ok', //invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { fname: { message: "this field required", validators: { notempty: { message: "this field required" }, stringlength: { max: 20, message: "this field cannot larger 20 characters" } } }, lname: { message: "this field required", validators: { notempty: { message: "this field required" }, stringlength: { max: 20, message: "this field cannot larger 20 characters" } } }, department: { validators: { greaterthan: { value: 1, message: "choose 1 department" } } }, year: { validators: { greaterthan: { value: 1, message: "select current year" } } }, email: { message: "email address required", validators: { notempty: { message: "please provide email address" }, emailaddress: { message: "invalid email address" } } } }, submithandler: function(validator, form, submitbutton) { $.ajax({ url: 'register.php', type: 'post', datatype: 'json', data: $("#registration-form").serialize(), success: function(data) {; } }); } }); });<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>learning boostrap</title> <!-- bootstrap css --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/basic-template.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <!-- bootstrapvalidator css --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapvalidator.min.css" rel="stylesheet" /> <!-- jquery , bootstrap js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js" type="text/javascript"></script> <!-- bootstrapvalidator --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapvalidator.min.js" type="text/javascript"></script> </head> <body> <div class="row"> <div class="column col-md-6"> <div class="panel panel-default panel_custom"> <div class="panel-heading" style="background:linear-gradient(to left,black 70%,#300032); border:0px">registration</div> <div class="panel-body"> <form id="registration-form" method="post" action="register.php" role="form"> <div class="form-group"> <label class="control-label" for="fname">name:</label> <div class="row"> <div class="column col-md-6"> <input type="text" class="form-control" id="fname" name="fname" placeholder="first" /> </div> <div class=" col-md-6"> <input type="text" class="form-control" id="lname" name="lname" placeholder="last" /> </div> </div> </div> <div class="row"> <div class="column col-md-6"> <div class="form-group"> <label class="control-label" for="department" style="padding-top:10px">department:</label> <select id="department" name="department" class="form-control" "> <option value="0 ">choose one</option> <option value="1 ">computer science</option> <option value="2 ">bio medical science</option> <option value="3 ">instrumentaion</option> <option value="4 ">physics</option> <option value="5 ">polymer science</option> <option value="6 ">microbiology</option> <option value="7 ">food technology</option> <option value="8 ">electronics</option> </select> </div> </div> <div class="form-group "> <div class="column col-md-6 " > <label class="control-label " for="year " style="padding-top:10px ">year:</label> <select id="year " name="year " class="form-control " "> <option value="0">choose year</option> <option value="1">1st</option> <option value="2">2nd</option> <option value="3">3rd</option> <option value="4">4th</option> </select> </div> </div> </div> <div class="row"> <div class="column col-md-6"> <div class="form-group"> <label class="control-label" for="male" style="padding-top:10px">gender:</label> <div class="radio"> <label> <input type="radio" value="1" name="gender" required/>male</label> </div> <div class="radio"> <label style="padding-left:20px"> <input type="radio" value="2" name="gender" />female</label> </div> </div> </div> <div class="column col-md-6"> <div class="form-group"> <label class="control-label" for="email" style="padding-top:10px">e-mail address:</label> <input type="text" class="form-control" id="email" placeholder="email address" name="email" /> </div> </div> </div> <div class="row"> <div class="column col-md-12"> <button class="btn btn-success" type="submit" value="but" name="submit">submit</button> </div> </div> </form> <div id="confirmation" class="alert alert-success hidden" style="background:linear-gradient(to left,black 70%,#300032); border:none;"> <span class="glyphicon glyphicon-star"></span> <h4>thank registering. revert shortly on email provided you</h4> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment