How to put green border for valid fields in ASP.NET MVC

Question

I cannot find any easy way of making borders green for fields that are valid in ASP.NET MVC. I am using DataAnnotations and Unobtrusive jquery validation. I have all the default validation styles and I can easily change border color of invalid controls and colour of the messages. However, there there is no style being added to valid fields. How can I do it. DO I need to hijack it with jquery?

Another question I have is how to trigger validation on fields on blur without writing much of the custom code? By default it validates only on form submit. Do I have to use Remote Validation for that? I was hoping there was an easy setting somewhere to enable it.

EDIT

   <% using (Ajax.BeginForm("SaveSupplier",
                             "Suppiers",
                             new AjaxOptions
                             {
                                 UpdateTargetId = "supplier-details-wrapper",
                                 InsertionMode = InsertionMode.Replace
                             },
                             new { id = "supplier-details-form", enctype = "multipart/form-data" }))
    { %>

        <div id="supplier-details">
            <p>
                <%: Model.PageDescription %>
            </p>

            <%: Html.AntiForgeryToken() %>

            -- MY FIELDS HERE --

        </div>

    <% } %>

    <div class="form-buttons">
        <button id="save-button" type="button" class="submit-button">Save</button>
        <button id="cancel-button" type="button" class="submit-button">Cancel</button>
    </div>

ANd javascript

<script type="text/javascript">
    $(function () {

        $("#save-button").click(function () {
            $("#supplier-details-form").submit();
        });

        $('input[data-val=true]').on('blur', function () {
            $(this).valid();
        });
    });
</script>

I also have

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>">  </script>

And in web.config

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

My issue is that it only does validation on server side no matter what I do. How do I manually trigger it in javascript. I tried various things and it always does postback to the server. $("#my-element-id").valid() sort of works, it returns 1 or 0, but it doesnt highlight text box and doesnt show error. Validate doesnt seem to do anything. I have a suspicion it has something to do with my buttons being outside of Ajax form or because of AntiFormgeryToken.

On submit waits for the server to validate and returns the response, to do it immediately means either validating in jquery or sending ajax requests to the server validation functions. Either way there isn't a ton anyone can tell you without seeing the actual code other than what I just said. — Rick Calder, Apr 03 '13 at 10:57

score 3 · Answer 1 · answered Apr 03 '13 at 12:24

3

As for validation on client side add this code in your web.config

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

And for border color, try to put this in your css:

input:valid { border-color:green; }

answered Apr 03 '13 at 12:24

freshbm

5,540
5
46
75

I have all web.config settings and I have all unobtrusive jquery libraries added. – fenix2222 Apr 03 '13 at 12:38
1

`input:valid` or `input.valid`? Seems to me that if you want to cover non-HTML5 browsers, you'd need both (jQuery validate provides the `.valid` class). – Ryley Apr 03 '13 at 15:14

score 1 · Answer 2 · edited May 23 '17 at 12:12

Style valid elements

My approach to this would be to set the default styling of the elements to be valid (green border). Then use the validation style classes (e.g. input-validation-error) to override the default styles when an input item is invalid.

Validate on blur

To do this you need to change the validation settings. This can be done like so.

var validator = form.data("validator");
    if (validator){
        validator.settings.onkeyup = false; // Disable keyup validation
        validator.settings.onfocusout = function (element){                    
            $(element).valid();                   
        };
    }

I answered the same question regarding this here

See my edit. Also, I dont want to make all borders green by default. — fenix2222, Apr 03 '13 at 12:37

score 0 · Answer 3 · answered Apr 03 '13 at 22:56

I found my issue. I was loading partial views inside partial views. So content was loading dynamically. Adding this fixed on blur validation:

$(function () {
        $.validator.unobtrusive.parse(document);
        $("input[data-val=true]").on("blur", function () {
            $(this).valid();
        });
});

Also

input.valid 
{
    border: 1px solid rgb(19, 147, 7);
}

worked, but input:valid didn't as it was setting border to green to all fields, even invalid ones.

How to put green border for valid fields in ASP.NET MVC

3 Answers3