我正在尝试构建一个用 BootstrapValidator 进行验证的长表单，我对 BootstrapValidator 非常陌生。
我最大的问题是，如果一个字段不正确，即使成功复选标记保留，它也会用红色标记所有字段。表单提交正确，但视觉验证似乎非常不对劲。
要查看正在运行的表单...如果您在未填写任何内容的情况下单击“提交”，然后继续正确填写，您确实可以看到问题。
http://chelseaporter.com/APSoPC/adoptForm3.php
这是我的 HTML 代码和 javascript 的片段。
谢谢大家!
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Name</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Full Name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="address">Street Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="address" name="address" placeholder="Your Street Address">
</div>
</div>
<!--many more fields)-->
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><!-- closes panel Body-->
$(document).ready(function () {
var validator = $("#adoption-form").bootstrapValidator({
//live: 'disabled',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
name :{
validators : {
notEmpty : {
message : "Please provide your name."
},
stringLength: {
min : 4,
max: 35,
message: "Name must be between 4 and 35 characters long"
},
}//end validators
},
email :{
validators : {
notEmpty : {
message : "Please provide an email address"
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'The value is not a valid email address'
}
}//end validators
},
address : {
validators : {
notEmpty : {
message: "Address is required"
}
}//end validators
},
city : {
validators : {
notEmpty : {
message: "City is required"
}
}//end validators
},
state : {
validators : {
notEmpty : {
message: "State is required"
}
}//end validators
},
zip : {
validators : {
notEmpty : {
message: "Zip is required"
}
}//end validators
},
years : {
validators : {
notEmpty : {
message: "Years at current address is required"
},
numeric : {
message: "Valid number of years lived at current address is required (only numbers)"
}
}//end validators
},
hPhone : {
validators : {
notEmpty : {
message: "Home phone is required. If you only have one phone please enter that number for Home Phone AND Alt Phone."
},
phone : {
country: 'US',
message: "Valid phone number is required (only numbers)"
}
}//end validators
},
altPhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
dNumber : {
validators : {
notEmpty : {
message: "Driver's License number is required"
},
numeric : {
message: "Valid Driver's License number is required (only numbers)"
}
}//end validators
},
dState : {
validators : {
notEmpty : {
message: "Driver's License state is required"
}
}//end validators
},
ePhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
hType : {
validators : {
notEmpty : {
message: "Home Type required."
}
}//end validators
},
hStatus : {
validators : {
notEmpty : {
message: "Home Status Required"
}
}//end validators
},
lNumber : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
student : {
validators : {
notEmpty : {
message: "Please answer if you are a student."
}
}//end validators
},
} //end ALL validators
});
validator.on("success.form.bv", function (e) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
e.preventDefault();
$("#adoption-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
var $form = $(e.target),
fv = $form.data('bootstrapValidator');
});
//process the form
$("#adoption-form").submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'address' : $('input[name=address]').val(),
'city' : $('input[name=city]').val(),
'state' : $('select[name=state]').val(),
'zip' : $('input[name=zip]').val(),
'years' : $('input[name=years]').val(),
'hPhone' : $('input[name=hPhone]').val(),
'altPhone' : $('input[name=altPhone]').val(),
'dNumber' : $('input[name=dNumber]').val(),
'dState' : $('input[name=dState]').val(),
'employer' : $('input[name=employer]').val(),
'ePhone' : $('input[name=ePhone]').val(),
'hType' : $('select[name=hType]').val(),
'hStatus' : $('select[name=hStatus]').val(),
'lName' : $('input[name=lName]').val(),
'LNumber' : $('input[name=LNumber]').val(),
'student' : $('select[name=student]').val(),
'sName' : $('input[name=sName]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
console.log(formData);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
console.log(formData);
});
});
最佳答案
看起来验证正在按预期进行。您的表单元素上有“has-success”类，但被“has-error”类覆盖。这很令人困惑，因为没有一个父元素具有“has-error”类。看起来它只在完整的元素上正确添加了“has-success”类。在“has-success”类颜色上添加一个重要的颜色，使其看起来像这样:
.has-success{
color: #3c763d !important; }
你会用这个覆盖 BS 代码，但我觉得很奇怪，它一开始就没有正确地设计它的样式。此外，您的“备用电话”字段似乎显示为完整，其中没有任何内容。不过，它在技术上可能是正确的，因为它可能不是必填字段，但在此上下文中的“完整”是否与其他“完整”具有不同的含义，而其他“完整”的用户体验较差。
让我知道这是否重要。
关于forms - 即使某些字段正确， Bootstrap 验证程序也会将整个表单标记为红色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31616819/