In my HTML and JavaScript code, all the things are working nicely except the submit button, which should submit the page if there is no error in any of the form fields, but it's not submitting.
<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>
You need to have an action set for your form. For example...
http://www.w3schools.com/html/html_forms.asp