我正在尝试将bootstrapvalidation添加到我的网站注册表单中，但我没有让它工作需要帮助。 这是表单代码：
如果有人能帮我解决这个问题，我会非常感激，谢谢。
$(document).ready(function() {
$('#tryitForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
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(' ');
alert('Hello ' + fullName);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="tineyForym2" name="form1" method="post" action="#" enctype="multipart/form-data">
<input type="hidden" value="" name="user_id">
<input type='hidden' name='action' value='edit' >
<table border="0" cellSpacing="1" cellPadding="3" class="table" id='dynamic_form'>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>First Name
</td>
<td class="dynamic_form_value">
<input name="FirstName" class="form-control" value="" type="text" id="firstname" data-toggle="tooltip" data-placement="bottom" title="Enter your First name!">
</td>
</tr>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>Last Name
</td>
<td class="dynamic_form_value">
<input name="LastName" class="form-control" value="" type="text" data-toggle="tooltip" data-placement="bottom" title="Enter your last name!">
</td>
</tr>
<tr>
<td class="dynamic_form_field" height="20"> </td>
<td class="dynamic_form_value" height="20"> </td>
</tr>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>Username
</td>
<td class="dynamic_form_value">
<input name="Username" class="form-control" value="" type="text" data-toggle="tooltip" data-placement="bottom" title="Username will be used for login purpose!">
<br>(Choose Your username. Use letters, or numbers, but don't use spaces.)
</td>
</tr>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>Password
</td>
<td class="dynamic_form_value">
<input class="form-control" name="Password" value="" type="password" id="password" data-toggle="tooltip" data-placement="bottom" title="Enter Login Password!">
</td>
</tr>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>Confirm Password
</td>
<td class="dynamic_form_value">
<input class="form-control" name="Password2" type="password" value="" id="password2" data-toggle="tooltip" data-placement="bottom" title="Enter Matching password">
</td>
</tr>
<tr>
<td class="dynamic_form_field" height="20"> </td>
<td class="dynamic_form_value" height="20"> </td>
</tr>
<tr>
<td class="dynamic_form_field">
<cite>*</cite>Your E-mail
</td>
<td class="dynamic_form_value">
<input class="form-control" name="Email" type="email" id="email" value="" id="email" data-toggle="tooltip" data-placement="bottom" title="Your Email Address">
</td>
</tr>
<tr>
<td class="dynamic_form_field">Receive Newsletter </td>
<td class="dynamic_form_value">
<label class="radio-inline">
<input name="Newsletter" type="radio" value="1" >Yes
</label>
<label class="radio-inline">
<input name="Newsletter" type="radio" value="0" >No
</label>
</td>
</tr>
<tr>
<td class="dynamic_form_field">Auto Notification on new Jobs </td>
<td class="dynamic_form_value">
<label class="radio-inline">
<input name="Notification1" type="radio" value="1" >Yes
</label>
<label class="radio-inline">
<input name="Notification1" type="radio" value="0" >No
</label>
</td>
</tr>
</table>
<hr class="colorgraph">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3">
<input class="btn btn-primary btn-lg" type="submit" name="dede" value="Submit">
</div>
<div class="col-xs-12 col-md-6"> By clicking
<strong class="label label-primary">Submit</strong>, you agree to the
<a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use.
</div>
</div>
</form>
这是jsfiddle链接：http://jsfiddle.net/eo5t48rw/5/
答案 0 :(得分：0)
您应该为控件名称和验证器名称使用相同的名称.Ex。
字段：{firstName：{...}，LastName {...}，USERNAME {...}}
和控件应命名为name =＆＃34; firstName＆＃34;，name =＆＃34; LastName＆＃34;，name =＆＃34; USERNAME＆＃34;。名称区分大小写！
为了正确使用bootstrap验证器，您应该使用引导程序文档结构，例如：
<form id="tineyForym2" name="tineyForym2" method="post" class="form-vertical">
<div class="form-group">
<label class="control-label"> First Name </label>
<div class="controls">
<input name="firstName" class="form-control" value="" type="text" title="Enter your First name!" />
</div>
</div>
<div class="form-group">
<label class="control-label"> Last Name </label>
<div class="controls">
<input name="lastName" class="form-control" value="" type="text" title="Enter your Last name!" />
</div>
</div>
...
我有js错误＆＃34;过多的递归＆＃34;在你的代码中。在行
名=＆＃34;电子邮件＆＃34;类型=＆＃34;电子邮件＆＃34; ID =＆＃34;电子邮件＆＃34;
重命名此输入控件。它不应该等于类型名称（type =＆＃34; email＆＃34;）
在您的示例中，您在不存在的表单元素
上初始化bootstrapValidator$（＆＃39;＃tryitForm＆＃39）。bootstrapValidator
应该是
$('#tineyForym2').bootstrapValidator