How to set the text box border to red if validation fails

Question

I have a task to set a red color border for a text field when the check fails .net mvc 4.

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 to filter it?

Answer 1

 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; } 

Answer 2

 if ($('#TextBoxID').val() == '') { $('#TextBoxID').css('border-color', 'red'); } else { $('#TextBoxID').css('border-color', ''); } 

Answer 3

You need to create a css class as follows:

 .errorClass { border: 1px solid red; } 

And add it to your jQuery text box:

 $("#myTextBox").addClass('errorClass'); 

Answer 4

Just copy the code below in your project and you will find out I am using pure bootstrap and jquery here.

 <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> 

Answer 5

If you know only one text field and identifier, you can use the @PanzerKadaver solution. Otherwise, I suggest returning to json its own identifiers for the text fields that you want to turn red. Then skip it and add the client side error class.

Answer 6

result.renewableEnergy will give you the value you need. Any other objRenewableEnergy properties can be obtained using result.renewableEnergy.property