検証が

Question

に失敗した場合、検証は、.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; 
    } 

jsonオブジェクトには値が入っています。どのようにフィルタリングできますか？

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

あなたはそのようなCSSクラスにする必要があります。

.errorClass { border: 1px solid red; } 

をとjQuery whithあなたのテキストボックスに追加します。

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

Answer 3

あなたが唯一のテキストボックスとidがあなたに知られている場合は、 @PanzerKadaverソリューションを使用することができます。それ以外の場合は、私はあなたが赤を作りたいテキストボックスのIDを自分自身でjsonに戻すことを提案します。それをループし、クライアント側にエラークラスを追加します。

Answer 4

result.renewableEnergyあなたに必要な価値が与えられます。 objRenewableEnergyの他のプロパティはresult.renewableEnergy.property

Answer 5

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

Answer 6

によってアクセスすることができるだけでuは私がここに純粋に、ブートストラップと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>