我正在尝试构建一个使用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);
});
});
答案 0 :(得分：2)
看起来验证工作正常。您的表单元素具有＆＃34; has-success＆＃34;在他们上课，但被＃34; has-error＆＃34;类。这是令人困惑的，因为没有任何父元素具有＆＃34; has-error＆＃34;类。看起来它正确地添加了＆＃34; has-success＆＃34;只打算完成的元素。重要的是你的成功＆＃34;类颜色所以它看起来像这样：
.has-success{
color: #3c763d !important; }
你会用这个覆盖BS代码，但我觉得很奇怪它首先没有正确地设计它。此外，它看起来像你的＃34;替代电话＆＃34;字段显示为完整，没有任何内容。虽然，它可能在技术上是正确的，因为它可能不是一个必需的领域，可以完成＆＃34;完成＆＃34;在这种情况下，其他方面的意义不同于其他的完整的＆＃34;这是一个糟糕的用户体验。
如果重要的话，请告诉我。