I am new to JavaScript, when using bootstrapValidator my form does not gets submitted, removing all the JavaScript make the data upload nicely but there remains no validation. Kindly help me following is my code
<?php
include("navbar.php");
include("config.php");
if(isset($_REQUEST['submit']))
{
$query="INSERT INTO sign_up(firstname,lastname,emailid,password)VALUES(
'".$_REQUEST['fName']."','".$_REQUEST['lName']."','".$_REQUEST['email']."','".$_ REQUEST['password']."')";
mysql_query($query);
header("location:login.php");
}
?>
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<link href="css/portfolio-style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Registration</div>
<div class="panel-body">
<form id="registration-form" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="fName">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="fName" name="fName" placeholder="First Name"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="lName">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lName" name="lName" placeholder="Last Name"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="email">E-mail ID</label>
<div class="col-md-4">
<input type="text" class="form-control" id="email" name="email" placeholder="Your E-mail address"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="password" name="password" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="confirmPasword">Confirm Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="confirmPasword" name="confirmPasword" placeholder="Confirm Password"/>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-xs-offset-2 ">
<button type="submit" class="btn btn-success" name="submit" >Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js" type="text/javascript"> </script>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#alwaysEnableButtonForm')
var validator = $("#registration-form").bootstrapValidator({
feedbackIcons:{
valid:"glyphicon glyphicon-ok",
invalid:"glyphicon glyphicon-remove",
validating:"glyphicon glyphicon-refresh"
},
fields:{
fName:{
message:"First Name is required",
validators:{
notEmpty:{
message:"Please provide the First Name"
},
stringLength:{
max : 25,
message: "The first Name should not be more than 25 characters long"
}
}
},
lName:{
message:"Last Name is required",
validators:{
notEmpty:{
message:"Please provide the Last Name"
},
stringLength:{
max : 25,
message: "The Last Name should not be more than 25 characters long"
}
}
},
email:{
message:"E-mail address is required",
validators:{
notEmpty:{
message:"Please an E-mail address"
},
stringLength:{
min:6,
max:45,
message: "E-mail address must be between 6 and 45 characters long"
},
emailAddress:{
message:"E-mail address is invalid"
}
}
},
password:{
validators:{
notEmpty:{
message:"Password is required"
},
stringLength:{
min:8,
message:"Password must be 8 digits long atleast"
},
different:{
field:"email",
message:"E-mail address and password can not match"
}
}
},
confirmPasword:{
validators:{
notEmpty:{
message:"This field is required"
},
identical:{
field:"password",
message:"This should must match the first password"
}
}
}
}
})
.on('success.fields.fv', function(e, data) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
});
});
</script>
</html>
