Wie die Textbox Grenze Farbe Rot setzen, wenn die Überprüfung

Question

versagt Ich habe folgende Aufgabe rote Farbe Grenze für Textfeld zu setzen, wenn die Validierung in .net Mvc 4.

BExtensionMethods.cs nicht

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

Hier enthält das JSON-Objekt die Werte. Wie kann ich es filtern?

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

Sie benötigen eine CSS-Klasse wie das zu machen:

.errorClass { border: 1px solid red; } 

Und fügen Sie es Ihrer Textbox whith jQuery:

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

Answer 3

Wenn Sie nur eine Textbox und id Ihnen ist bekannt, haben, Sie können die @ PanzerKadaver-Lösung verwenden. Sonst würde ich vorschlagen, im json die IDs der Textboxen zurückzugeben, die man rot machen möchte. Dann durchlaufen Sie es und fügen Sie die Fehlerklasse auf der Client-Seite hinzu.

Answer 4

result.renewableEnergy wird Ihnen den Wert geben, den Sie brauchen. Alle anderen Eigenschaften des objRenewableEnergy kann durch result.renewableEnergy.property

Answer 5

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

Answer 6

Kopieren Sie einfach den Code unten in Ihrem Projekt zugegriffen werden u bekommen wissen, ich bin mit rein Bootstrap und jquery hier.

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