jquery - Unobtrusive validation - added rule only works when an existing field is in place -
i trying add required rule dynamically radio button list.
the example below works though when 'name' row removed validation longer fires.
it appears there needs field data-val attributes on page validation plugin start watching form.
how can add dynamic rules page no existing unobstrusive fields?
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container body-content"> <form action="" method="post"> <!-- when below row commented out validation no longer fires --> <div class="row"> <div class="col-md-4"> <p>name</p> </div> <div class="col-md-4"> <input class="input-validation-error" data-val="true" data-val-required="name required" id="name" name="name" type="text" value=""/> </div> <div class="col-md-4"> <span class="field-validation-error" data-valmsg-for="name" data-valmsg-replace="true"></span> </div> </div> <div class="row dynamic_checkbox_container"> <div class="col-md-4"> <p>dynamic checkbox</p> </div> <div class="col-md-2"> yes <input id="checkbox" name="checkbox" type="radio" value="true"/> </div> <div class="col-md-2"> no <input id="checkbox" name="checkbox" type="radio" value="false"/> </div> <div class="col-md-4"> <span class="field-validation-valid" data-valmsg-for="checkbox" data-valmsg-replace="true"></span> </div> </div> <input type="submit" value="go" name="go"/> </form> </div> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2/jquery.validate.unobtrusive.js"></script> <script> $(document).ready(function() { $(".dynamic_checkbox_container input").each(function() { $(this).rules("add", { required: true, messages: { required: "this field required." } }); }); }); </script> </body> </html>
Comments
Post a Comment