Manually add unobtrusive validation to mvc form

2
votes

This field is optionally validated based on its visibility. If the field is hidden then we don't want to validate it but if it's not hidden then I would want to add required validation.

I'm manually checking it now and stepping through the debugger I can see that the MS unobtrusive validation library is resetting the classes after I've changed the class attribute.

I'm guessing there's some built in methods I can call from the unobtrusive validation library but can't seem to get it figured out.

Model

[Column(TypeName = "varchar")]
[StringLength(150, ErrorMessage = "Url must be less than 151 characters.")]
public string Url { get; set; }

View Javascipt

if ($("#Url").val() === '') {
    $('#Url').addClass('input-validation-error');
    return false;
} else {
    $('#Url').removeClass('input-validation-error');
}

View Form 

<div>
    @Html.TextBoxFor(m => m.Url)
    @Html.ValidationMessageFor(m => m.Url)
</div>
3
javascriptc#jqueryasp.net-mvc

3 Answers

0
votes

Why not just limit input length?

@Html.TextBoxFor(m => m.Url, new { maxlength = 150 })

Ok, I haven't tried this but I think its roughly what you want

<div>
    @ Html.TextBoxFor(m => m.Url)
    @ If (Model.validateUrl)
      {
         var v = new ValidationMessageFor(m=>m.Url);
         v.GetHtml();
      }
</div>

or it may just be as simple as 

<div>
    @ Html.TextBoxFor(m => m.Url)
    @ If (Model.validateUrl)
      {
         @ Html.ValidationMessageFor(m => m.Url)
      }
</div>

I can't quite recall which is the appropriate one, been working so much in angular lately

0
votes

you cannot add class like that it will not work you have to use $.validator so your code will be like this

      <script type="text/javascript">
$("#Submitbutton")
    .click(function() {


        if ($("#Url").val() === '') {
            $.validator.setDefaults({
                ignore: "#Url"
            });

        } else {
            $.validator.setDefaults({
                ignore: null
            });
            return false;

        }
    });

it will check if its value is null it will ignore the validation else it will display validation error

0
votes

Ah finally found it!

Here's how to use the built-in validation library to add validation on the fly!

$('#Url').rules('add', {
    required: true
});