web-dev-qa-db-fra.com

Comment définir la couleur de bordure de la zone de texte en rouge lorsque la validation échoue

J'ai une tâche pour définir la bordure de couleur rouge pour la zone de texte lorsque la validation échoue dans .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;
    }

Ici, l'objet json contient les valeurs.Comment puis-je le filtrer?

jqueryasp.netasp.net-mvc-4asp.net-mvc-3-areas
10
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;

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

Vous devez faire une classe css comme ça:

.errorClass { border:  1px solid red; }

Et ajoutez-le à votre zone de texte avec jQuery:

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

Copiez simplement le code ci-dessous dans votre projet, vous le saurez, j’utilise purement bootstrap et jquery ici. 

<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>
2
PK-1825

result.renewableEnergy vous donnera la valeur dont vous avez besoin. Toute autre propriété de la objRenewableEnergy est accessible par result.renewableEnergy.property

0
Ashwin Singh

Si vous ne connaissez qu'un seul champ de texte et identifiant, vous pouvez utiliser la solution @PanzerKadaver. Sinon, je suggèrerais de renvoyer dans le JSON lui-même les identifiants des zones de texte que vous voulez rendre rouges. Puis parcourez-le et ajoutez la classe d'erreur côté client.

0
Devesh