这里验证表单字段。为了在同一行中获得三个文本框，我将三个div放在一个<div class="form-group">内。
当我单击使用空白字段进行注册时，它会给出正确的错误消息然后如果我在文本框中输入任何数据我没有得到绿色右标记而是右边用红色标记只有当我填充所有三个文本框时它才会给出绿色正确的标记。任何人都可以建议如何正确对齐和正确的消息吗？
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="../bower_components/datepicker/css/datepicker.min.css"></link>
<link rel="stylesheet" href="../Mine/css/MyCss.css"></link>
<form id="defaultForm" method="post" class="form-horizontal" action="login.jsp">
<div class="form-group">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="middleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Parents Full Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="middleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Phone</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="phone" placeholder="Phone number" />
</div>
<label class="col-xs-3 control-label">Email</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Permanent</label>
<div class="col-xs-3">
<textarea class="form-control" rows="3" name="presentaddress" /></textarea>
</div>
<label class="col-xs-3 control-label">Present</label>
<div class="col-xs-3">
<textarea class="form-control" rows="3" name="presentaddress" /></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Date-of-birth</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="datePicker">
<input type="Text" class="form-control" name="dob" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Class to join</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="classtojoin" placeholder="Class to Join" />
</div>
</div>
<div class="form-group">
<div class="col-lg-10 ">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form>
<script src="../Mine/scripts/MyScripts.js"></script>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
$(document).ready(function() {
$('#datePicker')
.datepicker({
autoclose: true,
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#defaultForm').bootstrapValidator('revalidateField', 'dob');
});
$('#fromdatePicker')
.datepicker({
autoclose: true,
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#defaultForm').bootstrapValidator('revalidateField', 'fromyear');
});
$('#todatePicker')
.datepicker({
autoclose: true,
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#defaultForm').bootstrapValidator('revalidateField', 'toyear');
});
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
// container: '#firstNameMessage',
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
//container: '.lastNameMessage',
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
middleName: {
//container: '.middleNameMessage',
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
studentusername: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
}
}
},
studentpassward: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
pattern: "/^\(?([0-9]{3})\)?[-. ]?([0-9]{2})[-. ]?([0-9]{4})$/; ",
message: 'The username must be more than 6 and less than 30 characters long'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
studentplaceofbirth: {
validators: {
notEmpty: {
message: 'The place of birth is required and cannot be empty'
}
}
},
studentmothetongue: {
validators: {
notEmpty: {
message: 'The mother tongue is required and cannot be empty'
}
}
},
studentemailid: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
studentmobileno: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
studentemgno: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
studentpresentaddress: {
validators: {
notEmpty: {
message: 'The present address is required and cannot be empty'
}
}
},
studentpermanentaddress: {
validators: {
notEmpty: {
message: 'The premanent address is required and cannot be empty'
}
}
},
studentbloodgroup: {
validators: {
notEmpty: {
message: 'The blood group is required and cannot be empty'
}
}
},
studentreligion: {
validators: {
notEmpty: {
message: 'The religion is required and cannot be empty'
}
}
},
studentcaste: {
validators: {
notEmpty: {
message: 'The caste is required and cannot be empty'
}
}
},
dob: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
},
classtojoin: {
validators: {
notEmpty: {
message: 'The class to join is required and cannot be empty'
}
}
},
studentnation: {
validators: {
notEmpty: {
message: 'The Nationality is required and cannot be empty'
}
}
},
fatherfirstname: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
fatherlastname: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
fathermiddlename: {
validators: {
notEmpty: {
message: 'The middle name is required and cannot be empty'
}
}
},
motherfirstname: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
motherlastname: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
mothermiddlename: {
validators: {
notEmpty: {
message: 'The middle name is required and cannot be empty'
}
}
},
guardianfirstname: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
guardianlastname: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
guardianmiddlename: {
validators: {
notEmpty: {
message: 'The middle name is required and cannot be empty'
}
}
},
}
});
});