0
下面是我的反饋頁面--->驗證字段，當條件爲真
<body class="career_bg">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="login">Login</a></li>
<li><a href="career">Career</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="CareerModal">
<div class="career-logo">
<a id="color_white" href="general_feedback"><b class="color_orange">FEEDBACK</b><b>FORM</b></a>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form id="general_feedback_form" method="post" action="general_feedback">
<div class="text-danger text-center" id="leave_error"></div>
<div class="modal-body">
<div class="col-xs-12">
<div class="text-center text-danger" id="general_feedback_error"></div>
<div class="text-center text-success" id="general_feedback_success"></div>
</div>
<div class="form-group">
<label>Rating :</label>
<div class="input-group">
<div class="stars">
<input class="star star-1" id="star-1" type="radio" name="fed_rating" value="5"/>
<label class="star star-1" for="star-1"></label>
<input class="star star-2" id="star-2" type="radio" name="fed_rating" value="4"/>
<label class="star star-3" for="star-2"></label>
<input class="star star-3" id="star-3" type="radio" name="fed_rating" value="3"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-4" id="star-4" type="radio" name="fed_rating" value="2"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-5" id="star-5" type="radio" name="fed_rating" value="1"/>
<label class="star star-5" for="star-5"></label>
</div>
</div>
</div>
<div class="form-group">
<label>Who You Are ?</label>
<select class="form-control" name="identity" id="identity" onchange='CheckIdentity(this.value);'>
<option value="">- Select -</option>
<option value="employee">Employee</option>
<option value="visitor">Visitor</option>
<option value="student">Student</option>
<option value="user">User</option>
<option value="others">Others</option>
</select>
</div>
<div class="form-group">
<input type="text" name="other_identity" id="other_identity" style="display:none"
class="form-first-name form-control">
</div>
<div class="form-group">
<label>User Name :</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<input type="text" class="form-control" name="user_name" id="user_name" />
</div>
</div>
<div class="form-group">
<label>Email :</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</div>
<input type="text" class="form-control" name="email" id="email" />
</div>
</div>
<div class="form-group">
<label>Improvement :</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-plus-square-o"></i>
</div>
<textarea class="form-control" rows="3" name="fed_improvement" id="fed_improvement"></textarea>
</div>
</div>
<div class="form-group">
<label>Comments :</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-comment-o"></i>
</div>
<textarea class="form-control" rows="3" name="fed_comment" id="fed_comment"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<div class="alert alert-success" role="alert" id="success_message" style="display:none;">
<i class="glyphicon glyphicon-thumbs-up"></i> Feedback send successfully</div>
<div class="alert alert-danger" role="alert" id="error_message" style="display:none;">
<i class="glyphicon glyphicon-thumbs-up"></i> Feedback Not send. Try again.
</div>
</div>
</div>
</div>
</div>
<?php $this->load->view('Website/common/script'); ?>
<?php $this->load->view('Website/custom'); ?>
</body>
</html>
我只想驗證「other_identity」字段時，從下拉列表中選擇「其他」
下面是腳本--->
div.stars {
display: inline-block;
}
input.star { display: none; }
label.star {
float: right;
padding-right: 10px;
font-size: 16px;
color: #444;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-1:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-5:checked ~ label.star:before { color: #F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
</style>
<script type="text/javascript">
function CheckIdentity(val)
{
var element=document.getElementById('other_identity');
if(val=='others')
{
element.style.display='block';
}
else
{
element.style.display='none';
}
}
$(document).ready(function() {
$('#general_feedback_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled',
fields: {
user_name: {
validators: {
stringLength: {
min: 2,
},
regexp: {
regexp: /^[a-z\s]+$/i,
message: 'Username can consist of alphabetical characters and spaces only'
},
notEmpty: {
message: 'User name is required'
}
}
},
fed_rating: {
validators: {
notEmpty: {
message: 'Please give your rating us'
}
}
},
identity: {
validators: {
notEmpty: {
message: 'Please select your identity'
},
}
},
other_identity: {
validators: {
notEmpty: {
message: 'Please specify your identity'
},
}
},
email: {
validators: {
notEmpty: {
message: 'Your email is required'
},
regexp: {
regexp: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i,
message: 'Please enter valid email address'
}
}
}
}
})
<!--On sucessful form validation-->
.on('success.form.bv', function (e) {
//$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
//$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent default form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('bootstrapValidator');
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: $form.serialize(),
success: function (result)
{
if(result == '1'){
$('#success_message').slideDown({opacity: "show"}, "slow");
$("#general_feedback_form")[0].reset();
setTimeout(function() {
window.location = "login";
}, 5000);
}else{
$('#error_message').slideDown({opacity: "show"}, "slow");
$('#error_message').delay(5000).fadeOut();
}
}
});
});
});
</script>
我使用引導驗證驗證領域.... 任何人都可以指導我如何驗證「other_identity」字段僅當用戶從下拉
請創建一個jsfiddle – brk
小提琴不會工作它有其他可靠的鏈接n腳本 –