Jak ustawić kolor czerwony tekstowe granicznego podczas sprawdzania poprawności nie powiedzie

Question

Mam zadanie, aby ustawić czerwony kolor obramowania dla pola tekstowego, gdy walidacja nie powiedzie się w 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; 
    } 

Tutaj obiekt Json zawiera wartości. Jak mogę je filtrować?

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

Musisz zrobić klasę css tak:

.errorClass { border: 1px solid red; } 

i dodać go do pola tekstowego pokojowe jQuery:

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

Answer 3

Jeśli masz tylko jedno pole tekstowe i identyfikator wiadomo wam, możesz użyć rozwiązania @PanzerKadaver. W przeciwnym razie sugerowałbym, aby w jsonie powrócić do identyfikatorów pól tekstowych, które chcesz zmienić na czerwony. Następnie przeprowadź przez nią pętlę i dodaj klasę błędów po stronie klienta.

Answer 4

result.renewableEnergy da ci potrzebną wartość. Wszelkie inne właściwości objRenewableEnergy można uzyskać przez result.renewableEnergy.property

Answer 5

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

Answer 6

Wystarczy skopiować poniższy kod w projekcie u pozna, używam wyłącznie bootstrap i jQuery tutaj.

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