我正在尝试构建 Bootstrap 验证表单以验证每个字段和闪存错误(如果有)。我使用链接包含了 Bootstrap 验证 js 和 css。 这是我的代码
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"> </script>
</head>
<body>
<br/>
<form id="contactForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email</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">Title</label>
<div class="col-md-6">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Content</label>
<div class="col-md-6">
<textarea class="form-control" name="content" rows="5"></textarea>
</div>
</div>
<!-- #messages is where the messages are placed inside -->
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div id="messages"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
</body>
<script>
$(document).ready(function() {
$('#contactForm').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
},
stringLength: {
max: 100,
message: 'The title must be less than 100 characters long'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The content is required and cannot be empty'
},
stringLength: {
max: 500,
message: 'The content must be less than 500 characters long'
}
}
}
}
});
});
</script>
</html>
在本地主机上的浏览器上一切正常，但在服务器上显示错误。当我在服务器上托管时，此 Bootstrap 代码未执行。 我不明白为什么会出现这种错误。 提前致谢。
最佳答案
这种方式似乎工作正常
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/>
</head>
<body>
<br/>
<form id="contactForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email</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">Title</label>
<div class="col-md-6">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Content</label>
<div class="col-md-6">
<textarea class="form-control" name="content" rows="5"></textarea>
</div>
</div>
<!-- #messages is where the messages are placed inside -->
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div id="messages"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"> </script>
<script>
$(document).ready(function() {
$('#contactForm').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
},
stringLength: {
max: 100,
message: 'The title must be less than 100 characters long'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The content is required and cannot be empty'
},
stringLength: {
max: 500,
message: 'The content must be less than 500 characters long'
}
}
}
}
});
});
</script>
</html>
关于jquery - Bootstrap 代码在服务器上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46514504/