多选项卡表单和bootstrapValidator
Multi tab forms and bootstrapValidator
我有一个表单，它的字段在不同的制表符中展开。我使用bootstrap框架和bootstrapValidator来验证表单。但问题是，当我处理字段在第一个选项卡表单字段在这个选项卡验证正常。如果所有字段都是正确的，并且我按下submit，则无论所有其他字段是否有效，都将提交表单。为什么呢?
<form action="" id="register-form" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="gGhsyEKjycBXKMoMMl9tFdOOF6ISez0t">
<div class="container bg-white">
<div class="tab-content">
<div class="tab-pane fade in active" id="client-details">
<div class="margin-20"></div>
<fieldset>
<legend>Personal Data</legend>
<span class="help-inline">This are your billing data</span>
<div class="margin-20"></div>
<div class="form-group">
<label for="id_client-first_name">First name:</label>
<input class="form-control input-sm" id="id_client-first_name" maxlength="40" name="client-first_name" type="text">
</div>
<div class="form-group">
<label for="id_client-middle_name">Middle name:</label>
<input class="form-control input-sm" id="id_client-middle_name" maxlength="40" name="client-middle_name" type="text">
</div>
<div class="form-group">
<label for="id_client-last_name">Last name:</label>
<input class="form-control input-sm" id="id_client-last_name" maxlength="40" name="client-last_name" type="text">
</div>
<div class="form-group">
<label for="id_client-adress">Adress:</label>
<input class="form-control input-sm" id="id_client-adress" maxlength="40" name="client-adress" type="text">
</div>
<div class="form-group">
<label for="id_client-email">Email:</label>
<input class="form-control input-sm" id="id_client-email" maxlength="75" name="client-email" type="email">
</div>
<div class="form-group">
<label for="id_client-phone_no">Phone no:</label>
<input class="form-control input-sm" id="id_client-phone_no" maxlength="20" name="client-phone_no" type="text">
</div>
<div class="form-group">
<label for="id_client-mobile">Mobile:</label>
<input class="form-control input-sm" id="id_client-mobile" maxlength="20" name="client-mobile" type="text">
</div>
<div class="form-group">
<label for="id_client-no_of_doctors">No of doctors:</label>
<input class="form-control input-sm" id="id_client-no_of_doctors" name="client-no_of_doctors" type="number">
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="user-data">
<div class="margin-20"></div>
<fieldset>
<legend>User details</legend>
<span class="help-block">Please provide with username and password</span>
<div class="margin-20"></div>
<div class="form-group">
<label for="id_user_data-first_name">First name:</label>
<input class="form-control input-sm" id="id_user_data-first_name" maxlength="30" name="user_data-first_name" type="text">
</div>
<div class="form-group">
<label for="id_user_data-last_name">Last name:</label>
<input class="form-control input-sm" id="id_user_data-last_name" maxlength="30" name="user_data-last_name" type="text">
</div>
<div class="form-group">
<label for="id_user_data-username">Username:</label>
<input class="form-control input-sm" id="id_user_data-username" maxlength="30" name="user_data-username" type="text">
</div>
<div class="form-group">
<label for="id_user_data-email">Email address:</label>
<input class="form-control input-sm" id="id_user_data-email" maxlength="254" name="user_data-email" type="text">
</div>
<div class="form-group">
<label for="id_user_data-password1">Password:</label>
<input class="form-control input-sm" id="id_user_data-password1" name="user_data-password1" type="password">
</div>
<div class="form-group">
<label for="id_user_data-password2">Password confirmation:</label>
<input class="form-control input-sm" id="id_user_data-password2" name="user_data-password2" type="password">
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="practice-details">
<div class="margin-20"></div>
<fieldset>
<legend>Practice Details</legend>
<span class="help-block">Please provide details of your practice</span>
<span class="help-block">If you don't provide we will use your client details.</span>
<div class="form-group">
<label for="id_practice_data-name">Name:</label>
<input class="form-control input-sm" id="id_practice_data-name" maxlength="50" name="practice_data-name" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-address">Address:</label>
<input class="form-control input-sm" id="id_practice_data-address" maxlength="50" name="practice_data-address" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-postal_code">Postal code:</label>
<input class="form-control input-sm" id="id_practice_data-postal_code" maxlength="10" name="practice_data-postal_code" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-phone_no">Phone no:</label>
<input class="form-control input-sm" id="id_practice_data-phone_no" maxlength="10" name="practice_data-phone_no" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-city">City:</label>
<input class="form-control input-sm" id="id_practice_data-city" maxlength="10" name="practice_data-city" type="text">
</div>
</fieldset>
</div>
</div>
<input type="submit" id="btn-register" name="register" class="btn btn-default btn-sm">
<div class="margin-20"></div>
</div>
</form>
和bootstrapValidator js
$("#register-form").bootstrapValidator({
fields:{
"client-first_name":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-last_name":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-phone_no":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-adress":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-mobile_no":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-no_of_doctors":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-email": {
validators: {
remote:{
url:"url_to_check_availability",
message: "This email already exists",
type:"GET"
},
notEmpty:{
message: "This field is required"
}
}
},
"user_data-username": {
validators: {
remote: {
url: "url_to_check_availability",
message: "This username already exists",
type: "GET"
},
notEmpty: {
message: "This field is required"
}
}
},
"user_data-password1":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"user_data-password2":{
validators:{
identical:{
field:"user_data-password1",
message:"Passwords do not match"
}
}
},
"practice_data-logo":{
validators:{
}
}
}
}).on('success.form.bv', function(e){
e.preventDefault();
var form = $(e.target);
console.log(form.serialize());
$.ajax({
timeout:15000,
url:"/order/",
type: 'post',
dataType:"json",
data:form.serialize(),
success:function(data, status, jqXHR){
console.log(data);
alert("saved successfully");
parent.location.replace('/crm/accounts/login/');
},
error:function(jqXHR, status, message){
if (status == "timeout"){
alert("The server took more time to respond");
alert(message);
}
else{
alert("Status: "+status+" Message: "+message);
}
}
});
});
提交时不应该验证表单吗?我怎么解决这个问题?什么好主意吗?
我不明白我问题的否定点，但无论如何我都要回答。
为了绕过这个，我添加了excluded:":disabled"
在我的validatorPlugin选项，因为，选项卡隐藏内容。
相关文章：
- 没有找到相关文章
