Change associated textbox color with jquery on client validation

I want to use jquery to select an associated element's parent that is required and change the css class.

I need to add a css class "error" to the parent div of the span for the required field. (This will color the textbox according to my css).

I have the following html markup that gets initially generated by my aspx page:

<div class="control-group">
  <label>Your name</label>
  <input name="ctl00$MainContent$txtName" type="text" maxlength="100" id="MainContent_txtName">
  <span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display:none;">This field is required</span>
</div>

After "client validation" the span gets changed to:

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display: inline;">This field is required</span>

And after a server postback the span is actually:

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" data-val-isvalid="False" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="">This field is required</span>

I would like to use one javascript function that does not require an onclick function on each button where this would be used. I want to reuse the same function on many pages.

Answers


While I couldn't find an answer specifically based on how to do this based on the span and data elements, instead an hour or so later I found another question that helped me come up with this solution:

<script type="text/javascript">
    $(document).ready(function () {
        $("form").submit(function () {
            if (typeof Page_Validators != 'undefined') {
                var errors = '';
                $.each(Page_Validators, function () {
                    if (!this.isvalid) {
                        $(this).parent().addClass("error");
                    }
                });
            }
        });
    });
</script>

link: Validation event for asp net client side validation


Need Your Help

ActiveModel::ForbiddenAttributesError use only params

ruby-on-rails-4 activerecord rails-activerecord

I'm getting ActiveModel::ForbiddenAttributesError in MicropostsController#create on line #2 in the create action.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.