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

does anyone know which version of hibernate tools is JPA 2.0 compliant

hibernate jpa reverse-engineering informix hibernate-tools

I've used hibernate-tools-4.0.0-CR1.jar having some problems with informix (11.7) reverse engineering entities generation, I'd like to try earlier versions to see if that helps but documentation is...

Get input values ignoring values in hidden forms

php html

I'm trying to get the $_POST value from a previous page.