I have used bootstrapValidator.js to validate my page, but I cannot validate my page. The validator download link is: . What is the possible error? Im using Netbeans as the IDE.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href=".1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="validator/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>
<script type="text/javascript" src=".0.3/jquery.min.js"></script>
<script type="text/javascript" src=".1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#RegisterForm').bootstrapValidator({
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
`enter code here` },
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
var fullName = [validator.getFieldElements('firstName').val(),
validator.getFieldElements('lastName').val()].join(' ');
$('#helloModal')
.find('.modal-title').html('Hello ' + fullName).end()
.modal();
}
});
});
</script>
</head>
<body>
<jsp:include page="header.jsp" flush="true" />
<br>
<br>
<br>
<br>
<form id="RegisterForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="firstName" />
</div>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" name="gender" value="male" /> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="female" /> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="other" /> Other</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn btn-primary">Say hello</button>
</div>
</div>
</form>
</body>
</html>
I have used bootstrapValidator.js to validate my page, but I cannot validate my page. The validator download link is: https://github./nghuuphuoc/bootstrapvalidator. What is the possible error? Im using Netbeans as the IDE.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="validator/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#RegisterForm').bootstrapValidator({
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
`enter code here` },
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
var fullName = [validator.getFieldElements('firstName').val(),
validator.getFieldElements('lastName').val()].join(' ');
$('#helloModal')
.find('.modal-title').html('Hello ' + fullName).end()
.modal();
}
});
});
</script>
</head>
<body>
<jsp:include page="header.jsp" flush="true" />
<br>
<br>
<br>
<br>
<form id="RegisterForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="firstName" />
</div>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" name="gender" value="male" /> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="female" /> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="other" /> Other</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn btn-primary">Say hello</button>
</div>
</div>
</form>
</body>
</html>
- Bootstrap Validator plugin is not the jquery-validate plugin. Please be more careful when tagging. Thanks. – Sparky Commented Apr 23, 2014 at 20:52
- 1 Do not spam-tag this question. Again, your plugin is clearly not the jQuery Validation plugin so the jquery-validate tag is not relevant and should not be used. – Sparky Commented Apr 24, 2014 at 6:37
1 Answer
Reset to default 4Your problem is likely here, where you've included a jQuery plugin before jQuery itself...
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
The Bootstrap Validator plugin is a jQuery plugin, so the jQuery library must be included first. Since it also depends on Bootstrap, it should probably e after that too...
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>