Java Script won't run if Required Field Validation exists

Question

User-1314346660 posted

Hello experts,

I have a web page that has an address finder via a java script. It all works fine. The problem I have is that when I add some validation to a drop down list then the script wont run!

My script (without validation is below). If I then add the validation - <asp:RequiredFieldValidator ID="rfvddSex" runat="server" ControlToValidate="ddSex" InitialValue="0" ErrorMessage="Please enter the childs sex" ></asp:RequiredFieldValidator> - then the script fails to call.

Here is my code:

<form id="form2" runat="server">

<div class="row">

<div class="col-sm-3">

<label>Sex</label>

<asp:DropDownList ID="ddSex" runat="server" required="True" CssClass="form-control" Font-Size="Medium" Height="35px" Width="100%">

<asp:ListItem>Female</asp:ListItem>

<asp:ListItem>Male</asp:ListItem>

</asp:DropDownList>

</div>

</div>

<div class="panel-footer">

<div class="row">

<div class="col-sm-12">

<label>Home Address</label>

<div id="postcode_lookup"></div>

</div>

</div>

<div class="row">

<div class="col-sm-3">

<label>Address Line 1</label>

<input id="line1" type="text" runat="Server" class="form-control">

</div>

<div class="col-sm-3">

<label>Address Line 2</label>

<input id="line2" type="text" runat="Server" class="form-control">

</div>

<div class="col-sm-3">

<label>Address Line 3</label>

<input id="line3" type="text" runat="Server" class="form-control">

</div>

<div class="col-sm-3">

<label>Town</label>

<input id="town" type="text" runat="Server" class="form-control">

</div>

</div>

<div class="row">

<div class="col-sm-3">

<label>County</label>

<input id="county" type="text" runat="Server" class="form-control">

</div>

<div class="col-sm-3">

<label>Postcode</label>

<input id="postcode" type="text" runat="Server" class="form-control">

</div>

</div>

</div>

<script>

$('#postcode_lookup').getAddress({

api_key: 'MY API KEY',

output_fields: {

line_1: '#line1',

line_2: '#line2',

line_3: '#line3',

post_town: '#town',

county: '#county',

postcode: '#postcode'

},

});

</script>

</form>

</body>

</html>

Please help!! This is a problem because I need to make sure that the dd is a required field.

Thanks very much for any suggestions!

Billson3000

Answer 1

User839733648 posted

Hi Billson3000,

According to your description and code, I'm sorry that I could not reproduce your issue.

The problem I have is that when I add some validation to a drop down list then the script wont run!

When you run the application after adding the validation, is there an error in the browser?

I suggest that you could use F12 developer tools to check if an error appears.

Then you may provide the error message so that it will be easier for us to help with you.

Best Regards,

Jenifer

Answer 2

User-1314346660 posted

Hi Jenifer,

Yes I am very sorry.

The error message I get is:

"Object doesn't support property or method 'getAddress'"

But if I remove the required validation code then there is no error. The requirevalidation seems to be preventing the next script from running. This isn't something I know much about so I am very grateful for any help!!

Billson3000

Answer 3

User61956409 posted

Hi Billson3000,

Based on the code that you provided, I do a test using jQuery-GetAddress plugin with the GetAddress.io API, which work fine on my side. 

Test result:

1) jQuery-GetAddress plugin works without causing/throwing any javascript exception in Console tab

2) RequiredFieldValidator control works well, if not selected item from dropdown

Besides, please check if you reference other js/jquery libraries that are not compatible with jQuery-GetAddress plugin, to troubleshoot the issue, you can create a new page with your code and only adding references to jQuery-GetAddress (without referencing other css/jquery libraries), and then check if it works as expected.

With Regards, 

Fei Han

Answer 4

User-1314346660 posted

Thank you Fei Han.

I wonder if I have a bug somewhere. I get the same error when I strip right back. For some reason, when I apply the RequiredFieldValidator it errors and cannot call the GetAddress script....

Any ideas why this may be so?

Billson3000

Answer 5

User839733648 posted

Hi Billson3000,

I've tried your code on my side and it works well. 

Maybe there are some other references incompatible with the GetAddress api.

As Fei Han has said, I suggest that you could start another new page and just add jQuery-GetAddress to test if it works.

Here is my test code according to your code and I hope it will be helpful to you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://getaddress.io/js/jquery.getAddress-2.0.8.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="row">
            <div class="col-sm-3">
                <label>Sex</label>
                <asp:DropDownList ID="ddSex" runat="server" required="True" CssClass="form-control" Font-Size="Medium" Height="35px" Width="100%">
                    <%-- to test if RequiredFieldValidator works --%>
                    <asp:ListItem Value="0">Select your gender</asp:ListItem>
                    <asp:ListItem>Female</asp:ListItem>
                    <asp:ListItem>Male</asp:ListItem>
                </asp:DropDownList>
                <asp:RequiredFieldValidator ID="rfvddSex" runat="server" ControlToValidate="ddSex" InitialValue="0" ErrorMessage="Please enter the childs sex"></asp:RequiredFieldValidator>
            </div>
        </div>
        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-12">
                    <label>Home Address</label>
                    <div id="postcode_lookup"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    <label>Address Line 1</label>
                    <input id="line1" type="text" runat="Server" class="form-control" />
                </div>
                <div class="col-sm-3">
                    <label>Address Line 2</label>
                    <input id="line2" type="text" runat="Server" class="form-control" />
                </div>
                <div class="col-sm-3">
                    <label>Address Line 3</label>
                    <input id="line3" type="text" runat="Server" class="form-control" />
                </div>
                <div class="col-sm-3">
                    <label>Town</label>
                    <input id="town" type="text" runat="Server" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    <label>County</label>
                    <input id="county" type="text" runat="Server" class="form-control" />
                </div>
                <div class="col-sm-3">
                    <label>Postcode</label>
                    <input id="postcode" type="text" runat="Server" class="form-control" />
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('#postcode_lookup').getAddress({
                    api_key: 'YOUR API KEY',
                    output_fields: {
                        line_1: '#line1',
                        line_2: '#line2',
                        line_3: '#line3',
                        post_town: '#town',
                        county: '#county',
                        postcode: '#postcode'
                    },
                });
            })
        </script>
    </form>
</body>
</html>

result:

Best Regards,

Jenifer

Answer 6

User-1314346660 posted

Thank you very much Fei Han and Jennifer.

Rookie Error I think...

I needed to run the javascript at the end of the form rather than midway through. I didn't realise this would impact on how it works. Thank you very much for your kind updates.

Billson3000