jQuery 验证失败时如何设置文本框边框颜色为红色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16186219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the textbox border color red when validation fails
提问by Niths
I have got a task to set red color border for text box when the validation fails in .net mvc 4.
当 .net mvc 4 中的验证失败时，我有一个任务来为文本框设置红色边框。
BExtensionMethods.cs
BExtensionMethods.cs
public static string GetTextBoxColor(this ModelStateDictionary ModelState)
{
string textBoxColor = string.Empty;
int count = 1;
var errorKeys = (from item in ModelState
where item.Value.Errors.Any()
select item.Key).ToList();
foreach (var item in errorKeys)
{
textBoxColor += string.Format("{0}.{1}</br>", count, item);
count++;
}
return textBoxColor;
}
Here the json object contains the values.How can I filter it?
这里 json 对象包含值。如何过滤它？
采纳答案by Niths
public static List<string> GetTextBoxColor(this ModelStateDictionary ModelState)
{
string textBoxColor = string.Empty;
int count = 1;
List<string> list = new List<string>();
var errorKeys = (from item in ModelState
where item.Value.Errors.Any()
select item.Key.Substring(item.Key.LastIndexOf('.')).Trim('.')).ToList();
foreach (var item in errorKeys)
{
textBoxColor += string.Format("{0}.{1}</br>", count, item);
list.Add(item);
count++;
}
return list;
}
回答by RandyMohan
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
}
else {
$('#TextBoxID').css('border-color', '');
}
回答by PanzerKadaver
You need to make a css class like that:
你需要制作一个这样的css类：
.errorClass { border: 1px solid red; }
And add it to your textbox whith jQuery:
并使用 jQuery 将其添加到您的文本框：
$("#myTextBox").addClass('errorClass');
回答by PK-1825
Just copy the below code in your project u will get to know, i'm using purely bootstrap and jquery here.
只需在您的项目中复制以下代码，您就会知道，我在这里仅使用引导程序和 jquery。
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
/**
* Override feedback icon position
* See http://formvalidation.io/examples/adjusting-feedback-icon-position/
*/
#eventForm .dateContainer .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="eventForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Event</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Start date</label>
<div class="col-xs-5 dateContainer">
<div class="input-group input-append date" id="startDatePicker">
<input type="text" class="form-control" name="startDate" />
<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-3 control-label">End date</label>
<div class="col-xs-5 dateContainer">
<div class="input-group input-append date" id="endDatePicker">
<input type="text" class="form-control" name="endDate" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#startDatePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the start date field
$('#eventForm').formValidation('revalidateField', 'startDate');
});
$('#endDatePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
$('#eventForm').formValidation('revalidateField', 'endDate');
});
$('#eventForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
startDate: {
validators: {
notEmpty: {
message: 'The start date is required'
},
date: {
format: 'MM/DD/YYYY',
max: 'endDate',
message: 'The start date is not a valid'
}
}
},
endDate: {
validators: {
notEmpty: {
message: 'The end date is required'
},
date: {
format: 'MM/DD/YYYY',
min: 'startDate',
message: 'The end date is not a valid'
}
}
}
}
})
.on('success.field.fv', function(e, data) {
if (data.field === 'startDate' && !data.fv.isValidField('endDate')) {
// We need to revalidate the end date
data.fv.revalidateField('endDate');
}
if (data.field === 'endDate' && !data.fv.isValidField('startDate')) {
// We need to revalidate the start date
data.fv.revalidateField('startDate');
}
});
});
</script>
回答by Devesh
If you have only one textbox and id is known to you , you can use the @PanzerKadaver solution. Otherwise i would suggest to return in the json it self the ids of the textboxes which you want to make the red . Then loop through it and add the error class on the client side.
如果您只有一个文本框并且您知道 id，则可以使用@PanzerKadaver 解决方案。否则，我建议在 json 中返回它自己要使红色的文本框的 ID。然后循环遍历它并在客户端添加错误类。
回答by Ashwin Singh
result.renewableEnergywill give you the value you need. Any other properties of the objRenewableEnergycan be accessed by result.renewableEnergy.property
result.renewableEnergy会给你你需要的价值。的任何其他属性objRenewableEnergy都可以通过result.renewableEnergy.property
