How do I add custom Javascript to asp.net client side causes validation function?

Question

I have an asp.net web for with a few Validation controls on:

<div class="form-row">
     <label>Email</label>
            <asp:TextBox ID="txtUserName1" runat="server" onchange="validate(this)">    </asp:TextBox>
            <asp:RequiredFieldValidator ID="reqUserName1" runat="server" ControlToValidate="txtUserName1"
                ErrorMessage="- The email address field is required" Text="*" CssClass="error_star" Width="10px" ValidationGroup="Register"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" CssClass="error_star" runat="server" ErrorMessage="- Invalid Email Address" Text="*"
                        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="txtUserName1"
                        ValidationGroup="Register"></asp:RegularExpressionValidator> 
        </div>

I have a button to submit the form

<asp:Button ID="cmdSubmit" runat="server" Text="Create Account" CssClass="small-button"
            ValidationGroup="Register" CausesValidation="true" OnClientClick="validateForm()" OnClick="cmdSubmit_Click" />

The first time I hit the button some client side validation is run and my validateForm() method is not hit. for subsequent times I click the submit button my custom validation works fine.

How do I attach some custom JavaScript to the client side validation?

here' the javascript

function validateForm() {
        $("input[type=text], input[type=password]", "#registerForm").each(function () {
            validate(this)
        });
    }

    function validate(control) {
        // Change the colour of the border
        for (var i = 0; i < control.Validators.length; i++) {
            if (!control.Validators[i].isvalid) {
                control.style.border = "1px solid red"
                return;
            }
        }
        control.style.border = "1px solid #E1D7CE"

    }

Axe · Accepted Answer · 2011-03-29 15:31:25Z

1

The page wasn't validating, so the javascript was working but it thought all the controls where valid, I added this

if (!Page_ClientValidate("Register")) {
            Page_ClientValidate("Register")
        }

to validate the page.

answered Mar 29, 2011 at 15:31

Axe

7397 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sonic Soul · Accepted Answer · 2011-03-29 14:33:00Z

0

You can use a custom validator

http://asp.net-tutorials.com/validation/custom-validator/

they work just like any other asp.net validators, accept you get to write the function that handles the validation and sets IsValid flag. This will in turn allow/prevent postback to occur.

answered Mar 29, 2011 at 14:33

Sonic Soul

25.1k39 gold badges138 silver badges197 bronze badges

1 Comment

Axe Over a year ago

I am struggling to get these to work, the comments here and not very encouraging!

Saeedouv · Accepted Answer · 2011-03-31 22:13:55Z

0

1- use CustomValidator, hence all you validation logic will reside in your JavaScript Code, lets say you want to validate TextBox for number > 12, javascript code would be like:

     function Validate(src, eventargs)
        {
          var control = Document.GetElementByID(src);
          if(control.value > 12)
           eventargs.IsValid = true;

    else 
    eventargs.IsValid = false;


        }

2- Use CustomValidator's ClientValidationFunctionProperty set to ="Validate" (the JavaScript Function)

when you try to do any postback, then the Page.Validators collection is evaluated and so your CustomValidator

edited Mar 31, 2011 at 22:13

answered Mar 30, 2011 at 6:32

Saeedouv

4371 gold badge6 silver badges18 bronze badges

2 Comments

Axe Over a year ago

When using a custom validator in conjunction with required validators the javascript function was not firring. I could not get this to work. Also I already have 7 controls on the page with 1-3 validators each, the validation works as required, I just want to turn the Text box border red. would I need to replace all my validation controls and write new js functions for each? wish I was using MVC!

Saeedouv Over a year ago

use this for marking the invalid TextBox with border function MarkRequiredFields() { var validator = document.getElementById('<% =RequiredFieldValidator1.ClientID %>'); var control = document.getElementById(validator.controltovalidate); if (!validator.IsValid) control.style.border = "3px solid Red"; }

Collectives™ on Stack Overflow

How do I add custom Javascript to asp.net client side causes validation function?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related